为什么 IE9 将我的 HTML5 块级元素显示为内联？答案

【问题标题】：Why is IE9 displaying my HTML5 block level elements as inline?为什么 IE9 将我的 HTML5 块级元素显示为内联？
【发布时间】：2010-09-22 06:54:40
【问题描述】：

HTML5 不应该在 IE9 中工作吗？它没有按预期工作。

这是我的 HTML5 代码：

<!DOCTYPE html>
<html>
<head><title>

    Dripel - Welcome

</title>
    <!--[if lt IE 9]> 
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]-->
</head>
<body>
    <header>Welcome to Dripel</header>
    <section id="main">

        I am under development. Please check back later.

    </section>
    <footer>
    </footer>
</body>
</html>

您可以在http://www.dripel.com/查看它。

在 IE 9 中，<header> 和 <section> 元素显示为内联。请注意，我目前没有使用任何 CSS。

知道发生了什么吗？

【问题讨论】：

你是不是不小心开启了“兼容”模式？
IE9 仍处于测试阶段，所以这也可能是原因。
@Strelok：兼容模式已关闭

标签： html internet-explorer-9

【解决方案1】：

根据 Dive into HTML5, the final version of Internet Explorer 9 won’t have this problem.

所以我认为你看到这个是因为 IE9 仍处于测试阶段。你是对的，当它发布时你不应该看到它。

无论如何，为 HTML5 元素包含显式 display: block 可能是值得的。您（通常）永远不知道何时有人会在 HTML5 之前的浏览器中查看您的代码。

【讨论】：

我已经在使用 HTML5 rest（在我的开发机器中）...这个问题只是出于好奇！

【解决方案2】：

对于其他浏览器也是如此，而不仅仅是 IE。 Firefox 3.6 也可以观察到相同的行为。

由于 HTML5 只是一个工作草案，浏览器供应商还没有为这些元素创建默认样式表，因此默认元素是内联显示的。

如果你想使用这些元素，请使用一个重置样式表display: block，例如：

article, aside, footer, header, hgroup, nav, section {
    display: block;
}

_{复制自 Chrome 的用户代理 CSS :)}

如果您想了解更多信息，那么请阅读beta release notes on HTML5。它没有明确声明 IE9“支持”那些 HTML5 元素。您的支持概念在这里也定义不明确-您是什么意思支持？像上面那样的 UA 样式表？支持通用的未指定元素？（IE9 有一个特性，所以你不需要一个小脚本在使用之前创建元素。）

HTML5 specs 只讨论每个元素的语义，并没有讨论浏览器应该如何显示它们。那么你期待一个“支持”HTML5 的浏览器吗？

【讨论】：

我知道我可以使用重置！但如果 IE 9 支持 HTML5 这句话是真的，我不应该使用 reset 来让它工作
正如 pritaeas 所说：“IE9 仍处于测试阶段，所以这也可能是原因。- pritaeas” - 请记住我们正在谈论的是 IE，只是因为它的版本 9 没有改变事实上它仍然是 ie。

【解决方案3】：

IE 9 支持部分 HTML5。所有其他浏览器也是如此。 HTML5 还没有完成，IE 9 也没有完成，没有浏览器支持所有的 HTML5。例如，我所知道的浏览器还没有支持<style scoped> 或<iframe seamless>。

我不希望任何浏览器在一个版本中支持所有 HTML5。 HTML5 有很多新功能，而且还处于不断变化的状态。浏览器一次实现一个功能，有时带有前缀以避免以后不兼容，有时在 beta 或开发版本中，以便可以在更广泛的发布之前对设计进行测试。不可能一口气写出一个完美的规范，然后让每个人一口气实现它；相反，特性是通过实验实现的，规范是围绕它们编写的，事情是固定的，规范是更新的，等等，直到每个人都对这一切都很好并且在不同浏览器之间以兼容的方式实现感到高兴。在所有 HTML5 中实现所有这些还需要很长一段时间。

【讨论】：