Html 在Chrome中使用em单元的问题

我在Chrome（31.0.1650.63 m版）中使用em单元时遇到问题

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

HTML:

问题似乎在于规则

字体大小：0.1em

，它不会使em缩小10倍。相反，它将em设置为某个最小值。

font-size:0.1em

和

font-size:0.2em

之间没有区别，因为两者都小于这个神奇的最小值

这是一个错误还是我做错了什么

这个特殊情况可以通过将“bbb”类的所有值乘以10来解决。但在我的情况下，事情更复杂，我需要这个

字体大小：0.1em

我使用em单元来构建可伸缩的控件。我的控件有根div和多个子元素。其思想是使用em设置所有值，em的运行时大小由根元素的字体大小控制。如果一个元素定义了字体大小，那么它的em将取决于它

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

更新：

以下是我正在谈论的不同输出的屏幕截图：

---

由于默认字体大小是

em

大小所指的大小，因此您需要声明字体大小，以便使em具有通用性

此fiddle全局声明字体大小为12px，然后浏览器将em大小视为该12px，而不是用户浏览器默认的未声明大小

本网站有一些很好的资料，可以进一步帮助您：

---

这是因为最小字体大小设置为6px（在Chrome 30+中）-您不能选择更低的值。当您设置

.aaa

的字体大小时，这没有问题，因为它的计算值是8px。但使用

字体大小：0.1em.bbb

上的code>会导致计算值0.8px-由于它小于最小值，实际使用的值为6px：

---

bug report，虽然有点不相关，但建议将最小字体大小设置更改为更大的设置，按done，然后将其更改回6px（尽管它似乎不适用于您的示例）。它还提到，在Chrome 27之前，您可以使用

-webkit text size adjust:none

（虽然从27版开始就被弃用了。）这是一个最近的问题，寻求类似的解决方案，但尚未得到回答。

正如412所解释的，这是由于Chrome的最小字体大小为

6px

，不过我要补充的是，只有在使用

em

或

rem

指定字体大小时，才会使用此字体大小。你可以接受这个限制，也可以回避它

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

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

正如我之前所做的（逻辑是容器高度需要根据字体大小进行缩放）。在Chrome上，看起来这里的

字体大小

将与预期的

12*1px=12px

相等，但是高度将计算为

20*6px=300px

，使用最小字体大小

6px

，这当然是不可取的

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

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

当

1em=16px

时，您的根元素（

）字体大小仍然计算为

1px

，但是由于它在px中而不是

em

/

rem

，因此

6px

的最小字体大小规则不会起作用，并且高度将根据需要等于

20px

警告

---

我最近发现，这不适用于一些非英语语言，如保加利亚语或广东话。就我个人而言，我已经对使用

em

不感兴趣了，因为我知道像Facebook等主要网站都不使用它们，相反，想要更大文本的用户可以在浏览器或操作系统级别使用缩放设置。

无法复制。Firefox（26）、Chrome（31.0.1650.63米）和Opera（Presto）都将绿色框渲染为红色框大小的1/4。只有IE9将绿色框渲染为非常小。@cimmanon：哪个操作系统？我在FF 26的Windows 7中看到了12x12绿色框。我也在使用Windows 7。绿色框应该很小。我添加了说明。在Firefox 50（Linux）中，绿色框非常小，但在Chrome 53（Linux）中，绿色框更大。您的描述听起来像是在谈论rem而不是em。em取决于父元素的字体大小。然而，你们的例子解决了我例子中的问题。实际上，以像素为单位设置aaa类的字体大小就足够了，而不是使用rem设置字体大小：我稍后会做更多的测试：-）这真是了不起！但在韧皮部回答后，我尝试使用像素（“12px”而不是“0.1rem”）设置

.aaa

的字体大小，这很有帮助。

.bbb

的计算大小现在是

1px

。。。检查这把小提琴：@Andrej:computed风格的

.bbb

对我来说仍然显示6px（在那把小提琴中）。很有趣。我再次检查，看到

.bbb

（Win Server 2012上的Chrome 31.0.1650.63 m）的“1px”。你有一个绿色的小盒子（比如15x15像素）还是一个大盒子？我有一个原来的90x90盒子（Chrome31.0.1650.63，Windows7）

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

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