inline-block：Firefox 4和IE 9 [英] inline-block: Firefox 4 vs IE 9
问题描述
我很困惑为什么IE9以惊人的方式解释这样的基本行为。
在Firefox 4或者Chrome 11中，我看到divs并排出现，如我所料。在IE9中，我看到div在另一个下面出现。
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>
我相信IE9符合标准，所以我缺少什么？
I'm confident IE9 is standards compliant, so what am I missing?
任何帮助将不胜感激。
更新：哇，这很奇怪。我以前没有DOCTYPE声明。我添加
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/TR/html4/strict .dtd> 在页面的顶部，IE9工作正常，就像Firefox和Chrome。
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?
推荐答案
我唯一能想到的是IE9使用兼容性视图（类似于IE7的渲染引擎，如果我没有错）渲染你的页面。
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.
只有IE8和更新版本才完全支持显示： inline-block 。 IE7及以上版本将它应用于默认为内联的元素（如 span ），而不应用于任何其他元素（如 li 或 div ）。因此，您的块元素仍显示为块，而不是内嵌块。
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.
更新：哇，这很奇怪。我以前没有DOCTYPE声明。我添加
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/TR/html4/strict.dtd\"> ;在页面的顶部，IE9工作正常，就像Firefox和Chrome。
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?
这很容易：在添加您的doctype声明之前，IE9正在渲染 quirks模式。在怪异模式中，IE像处理旧版本一样处理 display：inline-block ，正如上面段落中所解释的。通过一个doctype声明，IE9将在标准模式下渲染，按照预期渲染你的样式。
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.
这篇关于inline-block：Firefox 4和IE 9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
