css - 为什么我的 "em"字体大小根据我的设置不准确？

Question

我试图弄清楚为什么 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>

Answer 1

听起来这可能是一个继承问题 -

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

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

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