在Chrome中使用em单位会出现问题

Question

在Chrome中使用em单位会出现问题

htmlcssgoogle-chromefont-size

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将取决于该字体大小。

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

更新：

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

- Andrej

无法复现。Firefox（26），Chrome（31.0.1650.63 m）和Opera（Presto）都将绿色框呈现为红色框的1/4大小。只有IE9将绿色框呈现为异常小。 - cimmanon

@cimmanon：是哪个操作系统？我在Windows 7上的FF 26中看到了12x12绿色框。 - 412

我也在使用Windows 7。 - cimmanon

绿色的框应该相当小。我添加了插图。 - Andrej

绿色方框在Firefox 50（Linux）中非常小，但在Chrome 53（Linux）中较大。 - Jose Gómez

3个回答

2

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

假设你的根字体大小为1px，当1 em = 16px（即大多数浏览器的情况下），你可能会想使用以下规则：

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>）字体大小仍然计算为1px，当1 em = 16px时，但由于它是以px而不是em/rem为单位，因此最小字体大小规则6px不会起作用，高度将等于所需的20px。警告我最近发现这在某些非英语语言（如保加利亚语或广东话）中无法正常工作。个人认为，在了解到像Facebook等主要网站不使用em后，我已经放弃了使用em，而是使用想要更大文本的用户可以在浏览器或操作系统级别上使用缩放设置。

- andrewb

1

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

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

这个代码片段将字体大小全局声明为12px，然后浏览器会将em大小普遍处理为那个12px，而不是未声明的大小，这是用户浏览器的默认值。

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

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

- Phlume

你的描述听起来像是在谈论rem而不是em。em取决于父元素的字体大小。尽管如此，你的例子解决了我的问题。实际上，只需使用像素设置aaa类的字体大小，而不是使用rem：http://jsfiddle.net/rapik/j72aZ/5/ 我稍后会进行更多测试 :-) - Andrej

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 412 · Accepted Answer

这是因为在Chrome 30+中，最小字号设置被设定为6px，你无法选择更低的值。当你设置.aaa的字体大小时，它的计算值为8px，因此不会出现问题。但是，在.bbb上使用font-size: 0.1em;会导致计算值为0.8px，由于小于最小值，实际使用的值为6px。

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

这个 bug 报告虽然与主题略有不同，但建议将最小字体大小设置为较大值，按下“完成”，然后将其改回 6px（尽管对您的示例似乎不起作用）。它还提到，在 Chrome 27 之前，您曾经可以使用 -webkit-text-size-adjust: none; 来解决此问题（尽管自版本 27 起已被弃用）。这个最近的问题寻求类似的解决方案，但尚未得到答复。