为什么H2大于H1？

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中的小提琴,我确实看到了你描述的效果.右键单击标题并选择"检查元素"可以发现问题是由标题周围存在<article>和/或<section>标记引起的.

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

h1 { font-size: 2em }

和:

h2 { font-size: 1.5em }

但是,之前的规则被内部<article>和/或<section>标签覆盖了一些更具体的规则,可能是为了使章节标题小于正常的"整页"标题:

:-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>内部2个 这样的标签收缩进一步向下,大概是为了在正常的大小<h3>左右.

至关重要的是,Chrome默认样式表没有任何<h2>标签的特殊规则,所以它们总是(在Chrome 33中,无论如何)以相同的大小显示.因此,当被两个或更多个<article>和/或<section>标签包围时,<h1>变得小于<h2>.