<h1>小于firefox和chrome </h2>中的</h1> <h2>

Question

最新更新的代码位于：http://pastebin.com/TJweMgtL

从左侧开始，IE 8，Chrome，Firefox 5 ..您可以看到只有IE8才能正确显示 h1 和 h2 元素。

你们觉得怎么样？是什么导致了问题？我有不匹配的标签吗？谢谢！

---

修改 H1和H2在HTML4中没问题。我猜这是一个浏览器问题？

---

新更新

我删除了大部分不必要的代码，只留下了与问题相关的代码。感谢您的帮助！

最新更新的代码位于：http://pastebin.com/TJweMgtL

Answer 1

在HTML5中，嵌套n级深度的<h1>内部部分被视为<h(n+1)>。因此，单个<h1>中的<section>在语义上等同于<h2>，并且就这样呈现。在此上下文中，“部分”表示<section>，<article>，<nav>或<aside>中的任何一个。查看代码时，“再次测试（现在很小）”标题位于一个部分内的文章中，因此它与<h3>相同。当然，它小于<h2>。

Firefox和Chrome实现了HTML5的这一部分。 IE似乎还没有。

请参阅http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections上的示例和http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#sections-and-headings

上的样式规则

Answer 2

验证您的html和css是否存在错误列表。我刚刚复制了原始代码并提出了一些非常愚蠢的东西。

Answer 3

这不是在嵌套部分中渲染H1使得H2更大......只是浏览器制造商认为/同意，在网络编辑，生产者和开发者之下，h2通常被视为视觉上更重要的标题！这里没有关于轮廓渲染的内容！

请参阅我的示例：http://pastebin.com/yJ1vzEjj

对于IE8没有这样做，只是表明这些惯例还没有到达微软总部......再一次它是一个BUG，而不是一个特征： - ）

祝你好运！