缩小时Chrome会增加字体大小

Question

我有以下代码：

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的大小将会不同。 如果您在开发工具中检查font-size，您将意识到这一点  Chrome会自动增加文档的字体大小。

有人能告诉我为什么会这样吗？ 我怎么能阻止它？

我正在研究em和px的区别，所以将#div2的宽度改为200px是不可接受的。

JsFiddle Link

更新了内容和来源。

感谢您的帮助。

2014年6月16日更新

找到一些有趣的东西，想和你们分享。

如果您曾经触及过＆＃34;高级字体设置＆＃34;在Chrome中，或使用默认版本（不是中文或日文）：

1. 永远不允许将font-size设置为小于6px的数字（中文或日文版本为12px）。

2. 当你测量像＆＃34; height＆＃34;这样的东西时，1em永远不会小于6px（12px）。与＆＃34; em＆＃34;。

3. 如果您将文本设置为6px，并缩放到50％，您可能会看到文本呈现为3px（变为一半）。但是文本将被chrome设置为12px，并且可能会破坏您的布局。

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

Answer 1

请参阅，您使用px作为第一个div，使用em作为第二个div。

Chrome的字体大小最小，字体小于仅显示字体大小的字体。 （请参阅您的Chrome设置）

现在，使用带有 px 的div，该框会继续变小，在变焦率为33％（或25％或50％）时变得更小，但使用 em ，达到最小字体大小时，框保持相同的大小。见

em 对于通过缩放Chrome等字体大小来实现缩放的浏览器非常有用。因此，如果使用em调整所有元素的大小，则会相应地缩放。 em 确保即使 div 的大小发生变化（缩放时），也会显示整个内容。希望你得到答案：）

修改

在IE10中，设置中没有最小字体大小，如GC35所示。所以 em px 互相渲染。

Answer 2

div有不同的宽度。

10em并不总是等于100px

尝试设置相同的宽度（em或px）

  

em等于当前的font-size，例如，如果是   文件的字体大小是12pt，1em等于12pt

     

一个像素等于计算机屏幕上的一个点

请参阅this页面了解文档

您的更新小提琴here

body {
            font-size: 0.625em;
        }

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

        #div2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

<强>更新

如果它不起作用，请尝试使用此css属性

-webkit-text-size-adjust: none;