< H1>小于< h2>在Firefox和铬 [英] <h1> is smaller than <h2> in firefox and chrome

问题描述

最新的代码在这里：

解决方案

在HTML5中，< ; h1> 嵌套在n层以下的部分被视为< h（n + 1）> 。因此，单个< section> 内的< h1> 在语义上等同于 < h2> 并且如此被呈现。在这种情况下，章节是指< section> ，< article> ，< nav> 或< aside> 。看看你的代码，test-again（now small）标题是在一个section内的文章中，所以它和< h3> 是一样的。当然这比< h2> 小。

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

见 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-部分和样式规则 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

这篇关于< H1>小于< h2>在Firefox和铬的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！