<h1>小于<h2>在 Firefox 和 chrome 中 [英] <h1> is smaller than <h2> in firefox and chrome
问题描述
最新更新的代码在这里:
在 HTML5 中，嵌套 n 级深的部分内的 被视为 <h(n+1)> 代替.因此，单个 内的 在语义上等同于 并按原样呈现.在此上下文中，部分"是指 、、 或 <;旁边>.查看您的代码，再次测试(现在很小)"标题位于某个部分内的文章中，因此它与 相同.这当然比 小.
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
The latest updated code is here: http://pastebin.com/TJweMgtL
Starting from the left, IE 8, Chrome, Firefox 5.. you can see that only IE8 can display h1 and h2 elements correctly.
What do you guys think? What is causing issue? Did I have any mismatch tags? Thanks!
EDIT H1 and H2 are okay in HTML4. I am guessing that it's a browser issue?
New update
I removed most of the unnecessary codes, and only left what is relevant to the question. Thanks for the helps in advance!
The latest updated code is here: http://pastebin.com/TJweMgtL
In HTML5, an <h1> inside sections nested n levels deep is treated like <h(n+1)> instead. So an <h1> inside a single <section> is semantically equivalent to an <h2> and is rendered as such. In this context "sections" means any of <section>, <article>, <nav>, or <aside>. Looking at your code, the "test-again (now small)" header is inside an article which is inside a section, so it's the same as an <h3>. Which is smaller than the <h2> of course.
Firefox and Chrome implement this part of HTML5. IE doesn't seem to yet.
See the example at http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections and the style rules at http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#sections-and-headings
这篇关于&lt;h1>小于&lt;h2>在 Firefox 和 chrome 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
