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

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

：

html {
    font-size: 87.5%;
}

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

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

rem单位相对于根元素或

-元素。这意味着 我们可以在

元素上定义单个字体大小并定义 所有rem单位都是其中的一个百分比

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

相关CSS:

html {
    font-size: 87.5%;
}

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

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

我正在使用

！重要信息

覆盖内联代码字体大小的声明

问题是，我注意到代码块的字体大小远小于14px，很可能是12px。但是如果我删除

！重要提示

声明并在特定的

代码

元素上设置字体大小（设置特定内联代码元素的样式），字体大小在14px左右

---

你知道怎么做吗！重要的

声明可能会影响
rem
中的大小调整？（特别是考虑到我的情况。）
首先
！重要信息
是惰性编码，对可维护性有危险。它是有毒的，破坏了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%

编辑：

html {
    font-size: 87.5%;
}

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

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

您的
标记的
字体大小
是从父元素继承的，父元素最终继承自
主体
，而
主体
的
1.2142857rem
大约是17px，这就是您看到字体大小差异的原因，单空格和无衬线字体的差异也加剧了这种情况
 第一步
！重要信息
是惰性编码，对可维护性有危险。它是有毒的，破坏了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%

编辑：

html {
    font-size: 87.5%;
}

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

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

您的
标记的
字体大小
是从父元素继承的，父元素最终继承自
主体
，而
主体
的
1.2142857rem
大约是17px，这就是您看到字体大小差异的原因，单空格和无衬线字体的差异也加剧了这种情况
 好的，问题是（1）
字体系列
没有为
代码
和
前
块定义，这意味着Chrome和其他webkit浏览器选择了一些看起来更小的单空格字体（2）
行高
更小（几乎等于
字体大小
）

解决了这两个问题

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

另外，在
code
和
pre
块上设置
font-family
后，Chrome现在显示正确计算的
font-size
值。
好的，问题在于（1）
font-family
没有为
code
和
pre
块定义，这意味着Chrome和其他webkit浏览器选择了一些看起来更小的单空格字体（2）
行高
更小（几乎等于
字体大小
）

解决了这两个问题

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

另外，在
code
和
pre
块上设置
font-family
后，Chrome现在显示正确的
字体大小计算值。
（1）我必须使用
！重要信息
，因为我正在用我的子主题（WordPress）样式表中的
code
覆盖默认样式表中的
.entry content code
样式。我不想碰父样式表。如果我修改
。条目内容代码
，我将不得不修改许多其他内容。（2）
字体大小：14px！重要的适用于较旧的浏览器。甚至IE8也不支持
rem
我被告知。你不必使用
！重要信息
如果您重构了css以获得更好的特性，您就不需要它了。另外，请查看我的编辑，了解详细的描述。我不明白的是，为什么
1.2142857rem
，即设置在
body
、
p
或任何其他元素上的字体大小很重要？
code
（1rem）的字体大小应以
html
（87.5%）的字体大小为准。1rem应始终等于14px（只要浏览器的默认值为16px）。。。我错了吗？（另外，我可以确认，这个问题在最新版本的Chrome中依然存在——Firefox中一切正常）嗯。。。不。这个问题在Firefox中也存在，只是没有在Chrome中那么明显。（1）我必须使用
！重要信息
，因为我正在用我的孩子t中的
code
覆盖默认样式表中
的样式。条目内容代码