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

Viewed 52930

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.

5 Answers
Related