inline-block: Firefox 4 vs IE 9
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"&开发者_如何学JAVAgt; at the top of the page, IE9 works fine, just like Firefox and Chrome. Any ideas what it was going before?
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.
Try the following it works...
<div style='border: black solid 1px;display:inline'>
<div style='display: inline; width: 10em; height: 1em; background-color: red'>
block one
</div>
<div style='display: inline; width: 10em; height: 1em; background-color: green'>
block two
</div>
</div>
Yes, there are some problems with IE 9 and display: inline-block. It can be avoided with Compatibility lebel as BoltClock explain. My advice is to use float:left instead of display: inline-block
<div style='border: black solid 1px'>
<div style='float:left; width: 10em; height: 1em; background-color: red'>
block one
</div>
<div style='float:left; width: 10em; height: 1em; background-color: green'>
block two
</div>
</div>
You can find more about Div side by side in one line .
To get it working without DOCTYPE (adding it is not in my control ) i had to use the following css
<style type="text/css">
#myulid li{
display: inline-block;
width: 100px;
margin: 10;
text-align:center;
vertical-align: top;
}
</style>
<!--[if IE]>
<style type="text/css">
/* css for IE */
#myulid{
display: block;
}
#myulid li{
display: inline;
}
</style>
<![endif]-->
加载中,请稍侯......
精彩评论