Question

在Chrome中使用em设备时遇到问题（版本31.0.1650.63 m）。

以下JSFiddle在Chrome中产生错误输出（与Firefox或IE相比，绿色框太大）：

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，那么它将取决于它。

我很感激任何想法或建议！

更新

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

enter image description here

Answer 1

这是因为最小字体大小设置为6px（在Chrome 30+中） - 您无法选择较低的值。设置.aaa的字体大小时，这不会有问题，因为其计算值为8px。但是在font-size: 0.1em;上使用.bbb会导致计算值 0.8px - 并且因为它小于minium，实际使用的值是6px：

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

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

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/

Answer 3

正如412所解释的那样，这是由于Chrome最小字体大小为6px，但我会补充说，只有在使用em或{指定字体大小时才会启用此字体大小{1}}。要么你可以接受这个限制，要么你可以回避它。

假设您在1 em = 16px（即大多数浏览器）时将根字体大小定位为1px，您可能会考虑使用以下规则：

rem

正如我之前所做的那样（逻辑是你的容器高度需要根据字体大小来缩放）。在Chrome上，html { font-size: 0.0625em } .myElem { height: 20em; font-size: 12em; }似乎会按预期等同font-size，但高度将计算为12 * 1px = 12px，使用最小字体大小20 * 6px = 300px，这当然是不希望的。

相反，您可以使用以下方法：

6px

html { font-size: calc(1em / 16); } .myElem { height: 20em; font-size: 12em; }时，您的根元素（<html>）字体大小仍会计算为1px，但是因为它位于px而不是1 em = 16px / em， rem的最小字体大小规则不起作用，高度将根据需要等于6px。

在Chrome中使用em设备的问题

3 个答案: