在Chrome中使用em设备的问题

Question

我在Chrome(版本31.0.1650.63米)中使用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单元来构建可扩展的控件.我的控件有root div和多个子元素.我们的想法是使用em设置所有值,并且em的运行时大小由根元素的font-size控制.如果一个元素定义了font-size,那么它的em将取决于它.

我将不胜感激任何想法或建议!

更新:

以下是我所说的不同输出的屏幕截图:

Answer 1

这是由于最小字体大小设置为6px（在Chrome 30+中）而导致的-您不能选择较低的值。当您设置的字体大小时.aaa，这没有问题，因为它的计算值为8px。但是使用font-size: 0.1em;on会.bbb得出0.8px的计算值-由于它小于最小值，因此实际使用的值为6px：

http://linenwoods.com/images/dev.png

该错误报告虽然没有什么关系，但建议将最小字体大小设置更改为更大的值，然后按“完成”，然后再将其更改回6px（尽管对于您的示例而言似乎不起作用。） Chrome 27，您曾经能够使用-webkit-text-size-adjust: none;它解决此问题（尽管自版本27起已弃用）。这是一个最近出现的问题，正在寻求类似的解决方案，但尚未得到解答。

Answer 2

由于默认字体大小是em大小所指的，因此您需要声明字体大小以使 em 具有通用性。

http://jsfiddle.net/j72aZ/1/

这个小提琴将全局字体大小声明为 12px，然后浏览器将 em 大小普遍视为 12px，而不是用户浏览器的默认未声明大小。

该网站有一些很好的材料，可能可以为您提供进一步的帮助：

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/