缩小时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 的大小会变得不同。 如果您在开发工具中检查字体大小，您会意识到 Chrome 会自动增加文档的字体大小。

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

我正在研究em和px的区别，所以把#div2的宽度改成200px是不行的。

JsFiddle Link

更新了内容和来源。

感谢您的帮助。

2014 年 6 月 16 日更新

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

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

1. 您永远不能将字体大小设置为小于 6px 的数字（中文或日文版本为 12px）。

2. 当您用“em”测量“高度”之类的东西时，1em 永远不会小于 6px(12px)。

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

感谢达瓦尔·侯赛因。他帮我实现了最小字体大小的事情。

Answer 1

看，第一个 div 使用 px，第二个使用 em。

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;