我想弄清楚为什么当em
字体大小设置为10像素时,body
字体大小不能正常工作。换句话说,除非我用一个像素值覆盖它,否则它就像是应用于元素的9px最小字体大小。有人能解释一下为什么会发生这种情况吗?
为了获得更多的说明:我已经将html
的font-size
设置为62.5%
以实现可访问性,在大多数浏览器的默认设置中,它等于10px
。我还将body
字体大小设置为1em
,它本质上等于10px
。我有3个段落的em
字体大小。如果您尝试检查chrome中的p
元素并转到开发工具中的" computed“选项卡,您将看到font-size
为1em
的第一个段落被计算为10px
(正如预期的那样)。但是另外两个段落的font-size
是计算成9px
的,我希望它们是8px
和6px
。这就像是应用了9px
的最小字体大小,覆盖它的唯一方法就是应用px
字体大小。
附言:我在Chrome 40.0.2214.111版本中遇到过这种情况,在OS的最新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>
发布于 2015-02-07 01:24:11
听起来这可能是一个继承的问题-
em将引用父容器,并基于此调整大小。
如果您想始终使用在html或正文元素上设置的字体大小,请使用'rem‘,它是根
这篇文章可以帮助你分解这个问题:https://j.eremy.net/confused-about-rem-and-em/
https://stackoverflow.com/questions/28376890
复制相似问题