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

时间:2011-07-27 22:06:10

标签: html5 firefox google-chrome

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

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

enter image description here

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


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


新更新

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

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

3 个答案:

答案 0 :(得分:18)

在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

上的样式规则

答案 1 :(得分:2)

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

答案 2 :(得分:1)

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

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

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

祝你好运!