Chrome和Firefox之间的Rems渲染不同

Question

我注意到在使用rem单位时，在Chrome和Firefox中它们的渲染存在一些细微的问题。

使用以下CSS：

html {
  font-size: 62.5%;
}

.rem-test {
  width: 50%;
  height: 20rem;
  background: red;
}

在渲染时，结果略有不同。Firefox 显示的框比 Chrome 中看起来短：

有什么方法可以阻止这种情况发生吗？

这是一个示例：http://codepen.io/abbasinho/pen/WbJWNq

- abbas_arezoo

---

你尝试过使用normalize css吗？它可以在不同浏览器之间规范化css渲染，可能会解决你的问题。 - geekpradd

它们在我的两个浏览器中看起来完全相同，我正在使用 Mac。 - lharby

同样的问题 - 也许你的Firefox字体大小设置与默认设置不同。 - BoltClock

如果您已经缩放了DPI设置，则可能会出现问题。请参见此问题。 - user2875289

Answer 1

那通常是因为您的浏览器具有不同的字体大小设置，您可以使用此代码段轻松检查。

alert(document.querySelector('.rem-test').scrollHeight);

如果Chrome和Firefox的警报值不同，你应该检查字体大小设置。

- Simon

Answer 2

在Chrome浏览器中，您可以查看chrome://settings/appearance并验证属性"字体大小"，建议值为"中等"。

个人而言，我设置了"大号"，然后css属性如margin、padding、line-height和font-size都看起来很不同。这些问题都得到了解决，只需将"Font-Size"设置为"中等"即可。

- Wilson

Answer 3

我也遇到了同样的问题。在我的情况下，这与Windows 10放大字体和项目大小有关。

Firefox考虑到这一点，在设置为125%时会将所有内容放大1.25倍。而Chrome则不会。

因此，在Firefox中的14px变为：在显示器上为17.5px，在Chrome中仍为14px。

- Remco

Answer 4

由于rem是使用html的字体大小计算的（即如果body的字体大小为5px，则20rem将为100px），因此您需要在各个浏览器中具有统一的字体大小。

尝试在CodePen中修改字体大小。

添加-

body, html {
    font-size:15px;
} 

现在一切应该都能够正常工作了。

- geekpradd

---

根元素是html，而不是body。这就是为什么OP将其设置为html的原因。 - BoltClock

我已经将html和body作为CSS选择器。 - geekpradd

那是我的笔误，但解决方案是正确的。 - geekpradd

就像我说的那样，根元素是html，而不是body，因此在body上设置字体大小对rem计算没有任何影响。 - BoltClock

Answer 5

你问题的“根源”在于：

1. 你从未在任何地方设置绝对字体大小； 2. 你混合了来自不同区域的相对长度值。 font-size: 62.5%; 是一个相对长度（字体高度，间接影响文本宽度），相对于父容器的相同属性。如果没有父容器，将会使用一些编译内置的默认值。（参见上面@seimen的回答。） width: 50%; 是一个相对长度（容器宽度），相对于父容器的相同属性，它不是以rem或字体高度的百分比表示，因此不必符合任何特定的文本量或你的期望。

有用的链接：

1. mdn:绝对长度单位
2. mdn:相对长度单位
3. CSS 盒模型 https://web.dev/learn/css/box-model

- AnrDaemon

---

宽度是相对的，不会影响问题所询问的内容。 - undefined

当容器的内容开始因不同的底长而溢出时，就会发生这种情况。 - undefined