6

在 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 将取决于它。

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

更新：

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

在此处输入图像描述

4

3 回答 3

5

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

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

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

于 2014-01-14T19:08:00.427 回答
2

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

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

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

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

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

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

您的根元素 ( <html>) 字体大小仍然计算为1pxwhen 1 em = 16px，但是由于它是 px 而不是em/ rem，因此最小字体大小规则6px不会起作用，并且高度将20px根据需要相等。

警告

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

于 2017-08-07T04:11:15.190 回答
1

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

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

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

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

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

于 2014-01-14T18:46:22.597 回答