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

Question

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

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

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

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

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

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

包含图像以便更清晰地查看事物：

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

您可以看到两页直播： http://artvard.com/category.html http://artvard.com/main.html

Answer 1

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

因此，如果您将h2设置为1em，那么您有一个内容区域，如<div id="content">，其样式为0.8em，#content div中的所有内容都将显示为0.8 EM。如果h2内有#content元素 ，则其大小为1em，您之前定义为0.8em，即它会显得更小。

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

Answer 2

如果在em中指定字体大小，则它将基于父元素的字体大小，因此如果标记具有不同的父级，则相同的设置可能会导致不同的实际大小。

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

如果h3的样式基于浏览器默认值，则无法使h2看起来相同。您可以在一个浏览器中为h2创建一个与h3的默认值相同的样式，但在另一个浏览器中，h3的默认值看起来会有所不同。

Answer 3

最佳解决方案是在H2和H3上使用CSS reset并从头开始设置样式。否则，总会有像行高字体大小等属性，每个浏览器可能会有所不同。