css 如何使 H2 标签看起来与 H3 标签相同（结果很难！）

Question

我正在寻求建议...以解决我的问题。

我正在为我的博客编写一个新的 wp 主题。

我遇到的问题是，我在主页和类别页面上发布了链接（导致发布的链接）。在主页上，此链接有 h3 标签，流动性原因（网站的 h1 标题，类别的 h2 标题，h3 帖子标题）。现在在类别页面上，我有不同的流程（h1 类别名称，h2 帖子标题）。问题是设计明智，它们必须看起来相同......所以我的挑战是让类别页面上的 h2 看起来与主页上的 h3 相同。

事实证明这并不容易。首先，我必须使用较小的字体。这对我来说很奇怪，我不得不设置 h2 0.8em 和 h3 1em。这是处理这个问题的正确方法吗？而且，即使我在两个标题上都有 0 边距，但还是出现了一些奇怪的间距...

所以这是最终结果，这使得 h2 看起来像 h3（必须使用较小的字体和 h2 上的行高，并且 margin-bottom 还要多 3px）。

我的问题是，如果这是实现这个结果的好方法吗？还是我的常规重置文件有问题？？

包括图片以便更清晰地查看事物：

http://imageshack.us/photo/my-images/33/unled1hg.jpg/

你可以看到两个页面： http://artvard.com/category.html http://artvard.com/main.html

Answer 1

您遇到的问题是因为 em 是从父元素继承的。如果有帮助，可以将它们视为百分比。

因此，如果您将h2 设置为 1em，那么您在 0.8em 处设置了类似 <div id="content"> 的内容区域，#content div 中的所有内容都将显示在 0.8em 处。如果你有一个h2 元素在#content，它的大小将是1em，你之前定义为0.8em，也就是说它会显得更小。

由于大多数现代浏览器都允许用户增加页面的大小，因此使用 ems 而不是 px 的论点较弱。所以我建议要么切换到 px，要么仔细查看你的继承。

Answer 2

如果你在em中指定字体大小，那么它会根据父元素的字体大小，所以如果标签有不同的父元素，同样的设置会导致实际大小不同。

如果有专门为h3设置的样式，你可以对h2重复，或者根据继承的值进行调整。

如果 h3 的样式是基于浏览器默认的，那么你不能让 h2 看起来一样。您可以在一个浏览器中为 h2 创建一个与默认的 h3 相同的样式，但在另一个浏览器中，默认的 h3 看起来会有所不同。

Answer 3

最好的解决方案是在 H2 和 H3 上都使用 CSS 重置，然后从那里开始设置样式。否则总会有诸如行高字体大小等属性，每个浏览器可能会有所不同。

当我在 2011 年写这个答案时，我提出了完全重置，但目前，有一个很棒且常用的 Normalize.css，它将样式重置为合理的默认值，所以你有一个很好的开始。