CODEWITHSUNDEEP
cssinternet-explorer-8
csteifel
csteifel

Reputation: 2934

Why are inline-block elements not displayed correctly in Internet Explorer 8?

I have the following code:

<div style='width: 200px; border: 1px solid black;'>
  <div style='display: inline-block; width: 70px; border: 1px solid green;'>
    asdfasdf<br />asdf
  </div>
  <div style='display: inline-block; width: 70px; border: 1px solid green;'>
    asdfasdf<br />were
  </div>
</div>

This displays just fine in Firefox and Chrome, but in Internet Explorer 8, it does not. They have layout, so that isn't the problem, and the widths are small enough that it fits on one line.

If I use <span>s instead, it does work; however, I would really like to know why <div>s don't work in IE.

Upvotes: 17

Views: 53234

Answers (5)

GeniusJRS
GeniusJRS

Reputation: 119

display: inline-block; *zoom: 1; *display: inline;

you can add inline-block for other browser but for IE you can add style with *. it only works in ie

Upvotes: 5

user2792101
user2792101

Reputation: 21

Changing the doc type worked for IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Upvotes: 2

kizu
kizu

Reputation: 43224

The old versions of IE don't understand the inline-block for block-level elements.

The reason why inline-block works for inline elements is because they did it so it triggers hasLayout. And the has layout for inline elements works exactly like an inline-block.

So, to make inline-block work with block-level elements, make them inline and somehow trigger the hasLayout, like, using zoom: 1.

So, for you code, there are two ways: change divs to spans, or add inline hacks (or move the code to external stylesheets and use conditional comments). The version with inline hacks would look like this:

<div style='width: 200px; border: 1px solid black;'>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />asdf
  </div>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />were
  </div>
</div>

Upvotes: 33

yunzen
yunzen

Reputation: 33439

Try this

<style type="text/css">
.one {
  width: 200px; 
  border: 1px solid black;
}
.two {
  display: -moz-inline-box; 
  display: inline-block; 
  width: 70px; 
  border: 1px solid green;
}
* html .two {
  display: inline;
}
* + html .two {
  display: inline;
}
</style>
<div class="one">
  <div class="two">
    asdfasdf<br />asdf
  </div>
  <div class="two">
    asdfasdf<br />were
  </div>
</div>

Upvotes: 0

Hux
Hux

Reputation: 3122

IE < 8 cannot switch elements that are block by default to inline-block elements. No matter how hard you try, they will always remain block unless you use float IIRC.

In your example it seems that you do not need to use a <div>. If this is the case, why not use a <span> or an element that is inline by default. Otherwise, floating is the answer.

Upvotes: 1

Related Questions