css - Chrome缩小时会增加字体大小

我有以下代码：

的CSS

#container{
    font-size: 0.625em;
}

#div1 {
    width: 200px;
    height: 200px;
    background-color: green;
}

#div2 {
    width: 20em;
    height: 20em;
    background-color: red;
}

的HTML

<div id="container">
    <div id="div1">
    This is a test message.This is a test message.This is a test message.This is a test message.
    </div>
    <div id="div2">
        This is a test message.This is a test message.This is a test message.This is a test message.
    </div>
</div>

Chrome版本

Version 35.0.1916.153 m

当您在Chrome中放大至50％或更小时，两个div的大小将变得不同。
如果您在开发工具中检查字体大小，您将意识到
 Chrome会自动增加文档的字体大小。

谁能告诉我为什么会这样吗？
我该如何预防呢？

我正在研究em和px的区别，因此将＃div2的宽度更改为200px是不可接受的。

JsFiddle Link

更新了内容和来源。

谢谢您的帮助。

2014年6月16日更新

在这里发现了一些有趣的东西并想与大家分享。

如果您曾经在Chrome中触摸过“高级字体设置”，或者使用默认版本（非中文或日语）：


您将永远不能将字体大小设置为小于6像素的数字（中文或日文版本为12像素）。
当您用“ em”测量“ height”之类的值时，1em永远不会小于6px（12px）。
如果将文本设置为6px，并缩放到50％，则可能希望看到文本渲染为3px（变为一半）。但是文字会被镶边设置为12px，可能会破坏您的布局。


感谢Dawar Husain。他帮助我实现了最小字体大小的事情。

最佳答案

看，您将px用于第一个div，将em用于第二个div。

Chrome的最小字体大小和字体小于将显示为该字体大小的字体。 （请参阅您的Chrome设置）

现在，将div与px一起使用时，该框会继续打开，并在以33％（或25％或50％）缩放时变得更小，但使用em时，当达到最小字体大小时，该框将保持相同的大小。看到



em在通过缩放字体大小（例如Chrome）来实现缩放的浏览器中很有用。因此，如果您使用em调整所有元素的大小，它们将相应地缩放。
em确保即使div的大小更改（缩放时），整个内容仍按原样显示。希望你能得到答案:)

编辑

在IE10中，设置中没有最小字体大小，如GC35中所示。因此em px彼此渲染。

关于css - Chrome缩小时会增加字体大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24200797/