0

更新：请注意，我仅在 Chrome（最新版本）中看到此问题。Firefox 中的一切似乎都很好。

根据定义：

rem 单位是相对于根元素或<html>元素的。这意味着我们可以在<html>元素上定义单个字体大小，并将所有 rem 单位定义为其百分比。

让我用一个例子来解释我的情况......

相关CSS：

html {
    font-size: 87.5%;
}

body {
    font-size: 17px;
    font-size: 1.21428571rem;
}

code {
    font-size: 14px !important;
    font-size: 1rem !important;
}

我正在使用!important声明来覆盖内联代码的字体大小。

问题是，我注意到代码块的字体大小远小于 14px，很可能是 12px。但是，如果我删除!important声明并在特定code元素上设置字体大小（为特定的内联代码元素设置样式），则字体大小看起来很好，看起来是 14 像素。

您对声明如何!important影响rem's 的大小有任何想法吗？（特别是考虑到我的情况。）

4

2 回答 2

2

首先!important是懒惰的编码和可维护性的危险。它是有毒的并且破坏了 CSS（级联部分）的性质。不惜一切代价避免它。

第二：

code {
    font-size: 14px !important;
    font-size: 1rem !important;
}

也可以这样写：

code {
    font-size: 1rem !important;
}

第二条规则覆盖第一条（同样，CSS 的级联性质）

rem代表根em，即顶层元素（即html）的字体大小

以及您的规则所说的 1 x html 元素的 em，是浏览器默认值的 87.5%。

编辑：

您的<p>标签有font-size100% 继承自父元素，该父元素最终继承自body并body具有1.2142857rem大约 17px 这就是为什么您会看到字体大小的差异，而等宽字体和无衬线字体的差异也加剧了这种差异字体。

于 2012-07-19T17:29:49.877 回答
1

好的，问题在于(1) font-family没有为code和pre块定义，这意味着 Chrome 和其他 webkit 浏览器选择了一些看起来更小的等宽字体(2) line-height更小（几乎等于font-size）。

解决这两个问题就解决了。

我不知道为什么 Chrome Dev Tools Web Inspector 的“Computed Style”显示 11px 作为字体大小（也适用于任何 webkit 浏览器，包括 Safari）。我可以确认它显示了错误的值，因为通过将字体更改为 Arial，我可以很容易地看出它是 14 像素。

此外，在设置font-familyoncode和preblocks 之后，Chrome 现在会显示正确的计算font-size值。

于 2012-07-20T02:40:03.960 回答