Question

在下面的代码片段中，为什么H2内容大于H1内容？

<article>
    <section>
    <header>
        <h1>First Header</h1>
    </header>
    </section>
    <section>
    <header>
        <h2>Second Header</h2>
    </header>
    </section>
</article>

http://jsfiddle.net/abugp/

为什么下面的代码段中的H1内容较大而不是上面的内容？

<h1>First Line</h1>
<h2>Second Line</h2>

http://jsfiddle.net/59T43/

Answer 1

由于您尚未指定任何样式，因此标题的大小由浏览器的默认样式表决定。特别是，这意味着两个标题的相对大小可能会因观看者的浏览器而异。

在Chrome 33中查看你的小提琴，我确实看到了你描述的效果。右键单击标题并选择＆＃34; Inspect element＆＃34;我们发现该问题是由标题周围<article>和/或<section>标记的存在引起的。

特别是，Chrome的默认样式表通常包含以下规则：

h1 { font-size: 2em }

和

h2 { font-size: 1.5em }

但是，之前的规则会在<article>和/或<section>标记内部被一些更具体的规则覆盖，这些规则可能是为了使章节标题小于正常范围＆＃34;整页＆＃34;标题：

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
}

:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
}

非标准:-webkit-any(...)选择器可能只匹配括号内列出的任何标签。结果是，<h1>，<article>，<aside>或<nav>标记内的所有<section>标题都缩减为正常<h2>的大小标题，以及两个内部的任何<h1>此类标记都会进一步缩小，大概是正常<h3>左右的大小。

至关重要的是，Chrome默认样式表不对<h2>标记有任何此类特殊规则，因此他们总是（在Chrome 33中），无论如何都是以相同的尺寸显示。因此，当被两个或多个<article>和/或<section>标记包围时，<h1>会变得小于<h2>。

Answer 2

这是因为文档样式要求。您可以在HTML 5.1 documentation @ 10.3.7 Sections and headings

找到详细信息

Answer 3

如果您未指定任何样式，浏览器将选择其默认样式。在第一个示例中，h1和h2位于节中的标题内，而在第二个示例中，它们位于根节中。然后可以接受的是行为不同。

Answer 4

这是HTML5 spec for sections and headings的一部分：

在以下CSS块中， x 是以下选择器的简写：:matches(article, aside, nav, section)

x h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; }
x x h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; }

奇怪的是，对于h2–h6没有这样的规则。

为什么H2大于H1？

4 个答案: