1

我正在寻求建议……为我的问题寻求解决方案。

我正在为我的博客编写一个新的 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

4

3 回答 3

2

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

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

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.

于 2011-07-06T17:49:57.397 回答
1

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

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

于 2011-07-06T17:41:54.547 回答
1

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

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

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

于 2011-07-06T17:49:15.493 回答