Question

更新：请注意，我仅在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元素上设置字体大小（设置特定内联代码元素的样式），则字体大小很好并且看起来很好14px。

您是否知道!important声明如何影响rem的尺寸？（特别是考虑到我的情况。）

Answer 1

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

第二

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

不妨写下来：

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

第二条规则覆盖了第一条规则（再次，CSS的级联性质）

rem代表root em，它是顶级元素的字体大小（即html）

以及你的规则是1 x html元素的em，是浏览器默认值的87.5％。

修改

您的<p>代码从父元素继承了font-size 100％，最终继承自body而body有1.2142857rem大约17px这就是为什么你会看到字体大小的差异，这也因为monospace和sans serif字体的不同而加剧了。

Answer 2

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

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

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

此外，在font-family和code块上设置pre后，Chrome现在会显示正确的计算font-size值。

使用rem调整大小（字体）时！important重要声明的效果

2 个答案: