在 Chrome 中使用 em 单位的问题答案

【问题标题】：Problems using em units in Chrome在 Chrome 中使用 em 单位的问题
【发布时间】：2014-01-14 18:15:31
【问题描述】：

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

在 Chrome 中使用 JSFiddle 会产生不正确的输出（与 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 单位来构建可扩展的控件。我的控件有根 div 和多个子元素。这个想法是使用 em 设置所有值，并且 em 的运行时大小由根元素的字体大小控制。如果一个元素定义了字体大小，那么它的 em 将取决于它。

如果有任何想法或建议，我将不胜感激！

更新：

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

【问题讨论】：

无法复制。 Firefox (26)、Chrome (31.0.1650.63 m) 和 Opera (Presto) 都将绿色框渲染为红色框大小的 1/4。只有 IE9 将绿色框呈现为异常小。
@cimmanon：哪个操作系统？我在 FF 26、Windows 7 中看到了 12x12 的绿色框。
我也在使用 Windows 7。
绿色框应该很小。我添加了插图。
绿色框在 Firefox 50 (Linux) 中非常小，但在 Chrome 53 (Linux) 中更大。

标签： html css google-chrome em

【解决方案1】：

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

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

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

【讨论】：

这是东西！但是在 Phlume 回答之后，我尝试使用像素（“12px”而不是“0.1rem”）设置.aaa 的字体大小，它有所帮助。 .bbb 的计算大小现在是 1px...检查这个小提琴：jsfiddle.net/rapik/j72aZ/5
@Andrej：.bbb 的计算样式对我来说仍然是 6px（在那个小提琴中）。
有趣。我再次检查，我看到 .bbb 的“1px”（Win Server 2012 上的 Chrome 31.0.1650.63 m）。你会得到一个绿色的小盒子（比如 15x15 像素）还是一个大盒子？
我得到了原来的 90x90 盒子（Chrome 31.0.1650.63，Windows 7）

【解决方案2】：

正如 412 所解释的，这是由于 Chrome 的最小字体大小为 6px，不过我要补充一点，这个字体大小只有在使用 em 或 rem 指定字体大小时才会生效。你可以接受这个限制，也可以回避它。

假设当 1 em = 16px（即大多数浏览器）时，您的目标字体大小为 1px，您可能会考虑使用如下规则：

html { font-size: 0.0625em }
.myElem { height: 20em; font-size: 12em; }

正如我之前所做的（逻辑是您的容器高度需要根据字体大小进行缩放）。在 Chrome 上，这里的font-size 似乎与预期的一样等于12 * 1px = 12px，但是高度将使用6px 的最小字体大小计算为20 * 6px = 300px，这当然是不可取的。

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

html { font-size: calc(1em / 16); }
.myElem { height: 20em; font-size: 12em; }

当1 em = 16px 时，您的根元素 (<html>) 字体大小仍计算为 1px，但是由于它以 px 为单位而不是 em/rem，因此 6px 的最小字体大小规则没有t 开始起作用，并且高度将根据需要等于20px。

警告

我最近发现这不适用于某些非英语语言，例如保加利亚语或粤语。就我个人而言，在了解到 Facebook 等主要网站不使用 em 后，我已经放弃了使用它们的兴趣，相反，想要更大文本的用户可以在浏览器或操作系统级别使用缩放设置。

【讨论】：

【解决方案3】：

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

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

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

这个网站有一些很好的材料可以帮助你进一步：

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

【讨论】：

您的描述听起来像是在谈论 rem 而不是 em。 em 取决于父元素的字体大小。不过，您的示例解决了我示例中的问题。实际上，以像素为单位设置 aaa 类的字体大小就足够了，而不是使用 rem 设置它：jsfiddle.net/rapik/j72aZ/5 稍后我会做更多测试:-)