为啥 IE10 中的“font-size: 1em”比 Chrome 大？

Posted 2023-03-05

【中文标题】为啥 IE10 中的“font-size: 1em”比 Chrome 大？

【英文标题】：Why is "font-size: 1em" bigger in IE10 than Chrome?为什么 IE10 中的“font-size: 1em”比 Chrome 大？

【发布时间】：2013-06-30 05:15:27

【问题描述】：

我目前正在开发一个网站，但我不明白为什么 IE10 中的文本显示比 Chrome 中的大。 （我确保两个浏览器都设置为 100% 缩放——不多也不少。）

我的 CSS 中有一个重置：body font-size: 1em; 。在 Chrome (v27.0.1453.116 m) 中，这会按预期显示——如果我将 CSS 中的规则更改为 font-size: 100%; 或 font-size: 16px;，则没有明显变化。对我来说，这表明在 Chrome 中，1em = 16px。但是比例字体大小（em 和 %）在 IE 中显示得更大，看起来是 1em = 21px。

我有两张图片显示body font-size: 1em; 时的区别，但由于我还没有 10 名声望，所以我无法发布完整的 URL。不过，它们托管在 imgur 上，它们的文件名如下：

font-size: 1em; 在 Chrome 中：

font-size: 1em; 在 IE10 中：

如果我使用px 设置font-size，那么我会得到一致的结果——Chrome 和IE10 都会一致地显示。但是使用px 来设置字体大小让我觉得这些天不太受欢迎。

您可以在this jsFiddle I made 中看到 html 和 CSS。我包含了所有的 CSS，这可能有点不必要，但我认为提供更多的上下文比提供更少的上下文更好。

谁能帮我弄清楚为什么 IE10 显示的 1em 比 Chrome 大，我能做些什么？

非常感谢。

编辑 - 一旦我发布了这个详尽的问题，我就会弄清楚发生了什么。我已将 IE 缩放设置为 100%，但 IE 还有一个“文本大小”选项，出于某种原因，该选项设置为“最大”。将其设置为“中”可以解决问题。

【问题讨论】：

这是浏览器默认字体大小。

我很确定这种情况正在发生，因为各自的 html 渲染引擎以略有不同的方式渲染该字体，但我不确定可以做些什么。

哦，天哪，我将 IE 缩放设置为 100%，但显然，IE 也有一个设置为“最大”的“文本大小”选项。当设置为“中”时，它会按预期显示。嗯，这太令人讨厌和尴尬了。

@Cyborgx37，试着测量字母“M”的大小，你会发现它的宽度和高度都不等于1em。

@JukkaK.Korpela - 你是对的。我对这个词的用法是outdated。

【参考方案1】：

以像素为单位的 em 大小与您使用的字体类型和大小、屏幕分辨率（取决于操作系统、浏览器）以及可能的其他操作系统和浏览器设置有关 - 例如“显示字体 +10% " 可能会改变 em 值。

据 Rudu 在此 post.

【参考方案2】：

我已经“解决”了我自己的问题，因为我是个傻瓜。

IE10 有两个设置，都在“查看”菜单下，可以更改显示的大小。我确保将“缩放”设置设置为 100%，但完全忽略了设置为“最大”的“文本大小”设置。将其设置为“中”解决了我的问题，并使 IE 和 Chrome 显示相同。

【讨论】：

犯错是人之常情，并不是特别傻。您可以接受您的答案，这似乎是正确的答案，即使问题有点混乱。这个问题实际上与您代码中的字体大小设置无关。

我认为在不同浏览器中使用相同字体大小的最佳方法是为正文设置固定的字体大小，然后在需要时使用 rems 更改其他元素的字体大小。