Menu
I'm confused why IE9 interprets such a basic behavior in a surprising way. In Firefox 4 or Chrome 11 I see that the divs appear side by side as I would expect. In IE9 though, I see the divs appearing one under the other.
<div style='border: black solid 1px'>
<div style='display: inline-block; width: 10em; height: 1em; background-color: red'>
block one
</div>
<div style='display: inline-block; width: 10em; height: 1em; background-color: green'>
block two
</div>
</div>
I'm confident IE9 is standards compliant, so what am I missing?
Any help would be appreciated!
UPDATE: Wow, this is bizarre. I had no DOCTYPE declaration before. The moment I add
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> at the top of the page, IE9 works fine, just like Firefox and Chrome. Any ideas what it was going before?
559
The only thing I can think of is that IE9 is using Compatibility View (similar to IE7's rendering engine if I'm not wrong) to render your page. If you turn off Compatibility View, you'll see that the boxes stack horizontally as expected.
Only IE8 and newer have full support for display: inline-block. IE7 and older apply it to elements that are inline by default (like span) and not to any other elements (like li or div). As a result, your block elements still display as blocks, not inline blocks.
UPDATE: Wow, this is bizarre. I had no DOCTYPE declaration before. The moment I add
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">at the top of the page, IE9 works fine, just like Firefox and Chrome. Any ideas what it was going before?
That's easy: before you added your doctype declaration, IE9 was rendering in quirks mode. In quirks mode, IE treats display: inline-block just like it did in older versions, as I explain in the above paragraph. By having a doctype declaration, IE9 will render in standards mode, rendering your styles as expected.
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
