为什么“em”字体大小不准确？答案

【问题标题】：Why `em` font sizing is not being accurate?为什么“em”字体大小不准确？
【发布时间】：2015-04-07 06:02:27
【问题描述】：

我试图弄清楚为什么em 字体大小在body 字体大小设置为 10 像素时表现不佳。换句话说，除非我用像素值覆盖它，否则元素的最小字体大小为 9px。谁能解释为什么会这样？

更多说明：我已将html 的font-size 设置为62.5% 以实现可访问性，大多数浏览器的默认设置等于10px。我还将body 字体大小设置为1em，它本质上等于10px。我有 3 个段落有 em 字体大小。如果您尝试检查 chrome 中的 p 元素并转到开发工具中的“计算”选项卡，您会看到第一个具有 font-size 的 1em 的段落被计算为 10px（如预期的）。但是其他两段的font-size 被计算为9px，我希望它们是8px 和6px。就像应用了9px 最小字体大小，而覆盖它的唯一方法是对其应用px 字体大小。

P.S：我在 Chrome 版本 40.0.2214.111 中遇到过这种情况，这也发生在 OS X Yosemite 上的最新 safari 中。

html {
  font-size:62.5%;
  padding:3em;
}
body { font-size:1em; }

._10 {
  font-size:1em;
}
._8 {
  font-size:0.8em;
}
._6 {
  font-size:0.6em;
}

<p class="_10">1x10 = 10</p>
<p class="_8">0.8x10 = 9 (!)</p>
<p class="_6">0.6x10 = 9 (!)</p>

【问题讨论】：

它似乎在 Chrome 中工作。你用的是什么浏览器。
浏览器可能确实有一个最小字体大小设置，可由用户控制。但它们也适用于以像素为单位设置的大小。请澄清您的问题并准确描述您是如何推断实际尺寸的，以及在哪些浏览器上。
@bobdye 不确定，但我认为您需要在 chrome 中检查它以查看差异
@JukkaK.Korpela 我已在问题中添加了更多信息
听起来您的 Chrome 副本已将最小字体大小设置为 9 像素（这是一个有用的设置，因为任何较小的字体往往都难以辨认）。这与症状相匹配，除了在页面上设置字体大小（以像素为单位）时不能覆盖最小值。

标签： css google-chrome safari em

【解决方案1】：

听起来可能是继承问题 -

em 将引用父容器，并据此调整大小。

如果您想始终使用 html 或 body 元素上设置的字体大小，请使用 root 的 'rem'

这篇文章有助于分解它：https://j.eremy.net/confused-about-rem-and-em/

【讨论】：