Question

致力于将我们的公司网站转换为更具响应性的内容，以便重新使用css来使用em代替经过验证的px。

我遇到的问题是font-size的继承问题，我正在寻找此问题的最佳做法。

这就是我现在解决问题的方法。

HTML

<h3>Heading with a <a href="#">Link</a></h3>

<p>this is a paragraph with a <a href="#">Link</a> inside of it</p>
<a href="#">this is a link outside the paragraph</a>

CSS

body {font:normal 100% sans-serif;}
p {font:normal 1.5em sans-serif; margin-bottom:.5em;}
h3 {font:bold 3em serif; margin-bottom:.5em; }
a:link {font-size:1.5em;}

p a, li a, h1 a, h2 a, h3 a, h4 a, h5 a,
h6 a, dl a, blockquote a, dt a, dd a, td a {
    font-size:1em !important;
}

我了解em与父font-size有关。因此，如果我设置p{font-size:1.5em;}并设置a:link{font-size:1.5em;}并且我的<a>超出了我的<p>那么它们将具有相同的相对大小，非常棒。

但是，如果我在<a>内放置<p>，嵌入的<a>的字体大小现在会更大，因为它1.5em大于<p> 1}}。为了解决这个问题，我使用p a, li a, h1 a,......{font-size:1em !important;}字符串设置了最后一个样式。由于a:link具有比p a更高的特异性，我必须使用!important（不是!important的粉丝），我也不能使用font-size:inherit;我敢说，我敢说，ie6（仍有15％的流量，我们是生物技术公司，有些公司只是拒绝升级）。

所以我的问题是这个。我是否正确地处理标签内部的标签，以防止我的排版分手？我一想到自己想到的最后一种风格，这就成了维持的噩梦！我想使用rem，但浏览器支持不适用于部分用户。

你如何在自己的CSS中解决这个问题，以及什么是“最佳实践”方法。

Answer 1

仅设置块的字体大小，例如标题和导航块。更改内联字体会导致混乱，因此不要为链接设置字体大小。相反，如果需要，请设置ul或div或包含导航链接的其他元素的字体大小。

一般情况下，尽可能少使用font-size设置，以尽量减少不必要的累积效应的风险。

注意：

这根本不是继承。在元素上设置font-size时，元素肯定不会继承字体大小。这是关于em单位的相对性质的影响。

例如，如果您设置了a:link{font-size:1.5em;}，则无需使用!important即可轻松覆盖段落内的链接。你必须更加具体，这里的自然方式是p a:link{font-size:1em;}。

Answer 2

你可能应该避免只选择a，只需要为它们添加一个更具体的选择器，当你希望它们的大小不同于它们从容器中继承的大小。我从不改变a的字体大小，而是在需要时更改其容器上的字体大小。同样，出于同样的原因，我避免为其他内联元素（例如span，em，strong）添加字体大小。

Answer 3

我建议使用重置样式表，例如Eric Meyer's reset.css，它将设置要在所有元素上继承的字体。然后在body中设置默认（或“主”）字体大小，并使用相对em单位设置所有其他元素的字体大小。

您的“堆叠”相对字体大小的问题应该不是问题，因为您很少必须在包含除文本之外的任何内容的元素上设置新字体，例如标题标记。在例外情况下，相关字体大小应该是您的网站的资产和资产，例如：在页脚区域中，所有文本都应小于站点默认值。

在相对字体大小导致不需要的行为的（罕见）情况下，您始终可以执行此操作：

p
{
    font-size: 1.5em;
}

a
{
    font-size: 1.5em;
}

p a
{
    font-size: 1em;
}

字体大小继承的最佳实践

3 个答案: