在Chrome中使用em单元的问题 [英] Problems using em units in Chrome

问题描述

在Chrome中使用em单元时出现问题（版本31.0.1650.63米）。

以下JSFiddle在Chrome中产生不正确的输出（与Firefox相比或IE的绿色框太大）：

这个错误报告尽管稍微不相关，但建议将最小字体大小设置更改为更大，按下完成，然后将其更改回6px（尽管它似乎不适用于您的示例）。它还提到，在Chrome 27之前，您是 一次能够解决这个问题 -webkit-text-size-adjust ：none; （尽管从版本27开始已被弃用）。这个近期的问题寻求类似的解决方案，但尚未得到解答。

I've got a problem when using em units in Chrome (Version 31.0.1650.63 m).

Following JSFiddle produces incorrect output in Chrome (in comparison to Firefox or IE the green box is too big):

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

The problem seem to be the rule font-size: 0.1em which does not make the em 10 times smaller. Instead it sets em to some minimum value. There will be no difference between font-size: 0.1em and font-size: 0.2em because both are smaller than this magic minimum value....

Is this a bug or am I doing something wrong?

This particular case can be solved by multiplying all values of the "bbb" class with 10. But in my case the thing is more complicated and I need this font-size: 0.1em.

I am using em units to build scalable controls. My controls have root div and multiple child elements. The idea is that all values are set using em and the run-time size of the em is controlled by the font-size of the root element. If an element has font-size defined, then it's em will depend on it.

I would appreciate any ideas or suggestions!

Update:

Here are screenshots of different outputs I am speaking about:

解决方案

This is caused by the fact that the minimum font-size setting is floored at 6px (in Chrome 30+) - you can't choose a lower value. This isn't problematic when you set the font-size of .aaa, as its computed value is 8px. But using font-size: 0.1em; on .bbb results in a computed value of 0.8px - and since it's less than the minium, the actual used value is 6px:

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

This bug report, though slightly unrelated, suggested changing the minimum font-size setting to something larger, pressing done, and then changing it back to 6px (though it didn't seem to work for your example.) It also mentioned that prior to Chrome 27, you were once able to get around this with -webkit-text-size-adjust: none; (though it's been deprecated as of version 27.) This, somewhat recent question, seeks a similar solution but has yet to been answered.

这篇关于在Chrome中使用em单元的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！