由于您没有指定任何样式,标题的大小由浏览器的默认样式表决定。特别地,这意味着两个头部的相对大小可以根据观看者的浏览器而变化。
看看你的小提琴在Chrome 33,我看到你描述的效果。右键单击标题并选择“检查元素”,可以看出问题是由于< article>和/或标签周围的标签。
特别是,Chrome的默认样式表通常包含规则:
h1 { font-size: 2em }
和:
h2 { font-size: 1.5em }
然而,前一个规则被覆盖在< article>和/或标签通过一些更具体的规则,大概设计为使得标题小于正常的“全页”标题:
:-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>或标签的大小减小到正常< h2>标题和任何< h1>在两个这样的标签内部进一步向下收缩,推测到正常的< h3>或者。
至关重要的是,Chrome默认样式表没有任何这样的特殊规则,用于< h2>标记,因此他们总是(在Chrome 33中,无论如何)以相同的大小显示。因此,当被两个或更多个标签,< h1>变得小于< h2> ;.