我在使用 Chrome(版本 31.0.1650.63 m)中使用 em 单位时遇到了问题。
以下 JSFiddle 在 Chrome 中产生了不正确的输出(与 Firefox 或 IE 相比,绿色框太大了):
http://jsfiddle.net/rapik/j72aZ/
HTML:
<div class="aaa">
<div class="bbb">
</div>
</div>
CSS:
.aaa {
font-size: 0.5rem;
width: 30em;
height: 30em;
background: red;
}
.bbb {
font-size: 0.1em;
width: 15em;
height: 15em;
background: green;
}
问题似乎出在规则
font-size: 0.1em
上,它并没有使em变小10倍。相反,它将em设置为某个最小值。 font-size: 0.1em
和font-size: 0.2em
之间没有任何区别,因为两者都小于这个神奇的最小值... 这是一个错误吗?还是我做错了什么?此特定情况可以通过将“bbb”类的所有值乘以10来解决。但在我的情况下,问题更加复杂,我需要使用
font-size: 0.1em
。我正在使用em单位构建可缩放控件。我的控件具有根div和多个子元素。想法是所有值都使用em设置,并且em的运行时大小由根元素的字体大小控制。如果元素已定义字体大小,则其em将取决于该字体大小。
我会感激任何想法或建议!
更新:
以下是我所说的不同输出的屏幕截图: