html - 为什么 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

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

看看你在 Chrome 33 中的 fiddle ，我确实看到了你描述的效果。右键单击标题并选择“检查元素”显示问题是由 <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>在 两个 中，这样的标签进一步缩小，大概缩小到正常 <h3> 的大小。左右。

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