css 如何使 H2 标签看起来与 H3 标签相同（结果很难！）
我正在寻求建议...以解决我的问题。
我正在为我的博客编写一个新的 wp 主题。
我遇到的问题是这样的，我在主页和类别页面上都有发帖的链接（导致发帖的链接）。在主页上，此链接有 h3 标签，流动性原因（h1 网站标题，h2 类别标题，h3 帖子标题）。现在在类别页面上我有不同的流程（h1 类别名称，h2 帖子标题）。问题是设计方面，它们必须看起来相同......所以我的挑战是使类别页面上的 h2 看起来与主页上的 h3 相同。
事实证明这并不那么容易。首先，我必须使用较小的字体。这对我来说很奇怪，我必须设置 h2 0.8em 和 h3 1em。这是处理这个问题的正确方法吗？而且，尽管我在两个标题上都有边距 0，但还是出现了一些奇怪的间距...
所以这是最终结果，这使得 h2 看起来像 h3 （必须使用较小的字体，h2 上的行高，以及边距-底部多3px）。
我的问题是，这是否是实现这一结果的好方法？或者我的一般重置文件有问题？
包括图像以便更清晰地查看事物：
http://imageshack.us/photo /my-images/33/unled1hg.jpg/
你可以实时看到两个页面： http://artvard.com/category.html http://artvard.com/main.html
I'm looking for advice... for a solution to my problem.
I'm coding a new wp theme for my blog.
The problem I've encountered is this, I've links to post on homepage and on the category page (links that lead to post). On homepage this links have h3 tag, cause of fluidity (h1 tittle of the website, h2 tittle of category, h3 post tittle). Now on category page I've different flow (h1 category name, h2 post tittle). The problem is that design wise, they must look identical... so my challenge is to make h2 on category page look same as h3 on homepage.
Turns out it's not so easy. First of all I had to use smaller font. Which is weird to me, I had to set h2 0.8em and h3 1em. Is this correct way of dealing with this issue? And than, even though I had margin 0 on both headings, some weird spacing came into being...
So this is final result, that makes h2 look as h3 (had to use smaller font, and line height on h2, and also margin-bottom more 3px more).
My question is, if this is ok way of achieving this result? or there is something wrong with my general reset file??
Including image for clearer view of the things:
http://imageshack.us/photo/my-images/33/unled1hg.jpg/
And you can see two pages live:
http://artvard.com/category.html
http://artvard.com/main.html
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您遇到的问题是因为 em 是从父元素继承的。如果有帮助的话，可以把它们想象成百分比。
因此，如果您将
h2设置为 1em，那么您将拥有一个类似的内容区域，您的样式设置为 0.8em，其中的所有内容#contentdiv 将以 0.8em 显示。如果您在#content内有一个h2元素，它的大小将为 1em，您之前定义为 0.8em，即它将显得更小。由于大多数现代浏览器允许用户增加页面的大小，因此使用 ems 而不是 px 的论点较弱。所以我建议要么切换到 px 要么仔细查看你的继承。
The problem you're having is because ems are inherited from the parent element. Think of them like percentages if it helps.
Therefore, if you set the
h2to 1em, then you have a content area like<div id="content">which you style at 0.8em, everything within the#contentdiv will be displayed at 0.8em. If you had ah2element inside the#content, it would be sized at 1em, which you previously defined as 0.8em, i.e. it will appear smaller.Since most modern browsers allow the user to increase the size of a page, the argument for using ems over px is weaker. So I would recommend either switching to px or looking carefully at your inheritance.
如果您在
em中指定字体大小，那么它将基于父元素的字体大小，因此如果标签具有不同的父元素，则相同的设置可能会导致不同的实际大小。如果有专门为 h3 设置的样式，则可以对 h2 重复该样式，或者根据继承的值进行调整。
如果 h3 的样式基于浏览器默认样式，那么您无法使 h2 看起来相同。您可以为 h2 创建一种样式，使其在一个浏览器中看起来与 h3 的默认样式相同，但在另一种浏览器中，h3 的默认样式看起来会有所不同。
If you specify font size in
em, then it will be based on the font size of the parent element, so if the tags have different parents, the same setting can result in different actual sizes.If there is a style specifically set for h3, you could just repeat it for h2, or adjust it according to the inherited values.
If the style for h3 is based on the browser default, then you can't make h2 look the same. You can make a style for h2 that looks the same as the default for h3 in one browser, but in another browser the default for h3 will look different.
最好的解决方案是在 H2 和 H3 上使用 CSS Reset 并从那里开始设置它们的样式。否则总会有诸如行高字体大小等属性，这些属性在每个浏览器上可能有所不同。
当我在 2011 年写这个答案时，我提出了完全重置，但目前，有一个很棒且常用的 Normalize.css，它将样式重置为合理的默认值，以便您有一个良好的基础。
Best solution is to use a CSS Reset on both H2 and H3 and start styling them from there. Else there will always be properties like line height font-size etc, that may differ on each browser.
When I wrote this answer in 2011, I proposed a full reset, but currently, there is this great and commonly used Normalize.css, which resets the styling to sensible defaults, so you have a good base to start with.