Question

我试图弄清楚为什么em字体大小调整的行为与body字体大小设置为10像素时的行为方式不同。换句话说，除非我用像素值覆盖它，否则应用于元素的最小字体大小为9px。谁能解释为什么会这样呢？

有关详细说明：我已将html font-size设置为62.5%以获取辅助功能，在大多数浏览器的默认设置下，{{1} }}。我还将10px字体大小设置为body，其本身等于1em。我有3个段落有10px字体大小。如果您尝试检查chrome中的em元素并转到＆＃34;计算＆＃34;在开发工具中的标签中，您会看到p font-size 1em的第一段计算为10px（正如预期的那样）。但另外两段＆＃39; font-size计算为9px，我希望它们为8px和6px。它应用了9px最小字体大小，覆盖它的唯一方法是对其应用px字体大小。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

如果您希望始终在html或body元素上使用字体大小设置，请使用＆＃39; rem＆＃39;这是 root

本文有助于细分：https://j.eremy.net/confused-about-rem-and-em/

为什么`em`字体大小不准确？

1 个答案: