Chrome 和 Firefox 之间的 Rems 渲染不同

Question

在比较它们在 Chrome 和 Firefox 中的呈现方式时，我注意到使用 rems 时存在一个小问题。

使用以下 CSS:

html {
  font-size: 62.5%;
}

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

呈现的结果略有不同，Firefox 显示的框比在 Chrome 中看起来要短：

我能做些什么来阻止这种情况发生吗？

Answer 1

由于 rem 是使用您的 html 的字体大小计算的（即 body 的字体大小为 5px，那么 20rem 将为 100px），因此您需要跨浏览器使用统一的字体大小。

尝试在码笔中添加修改字体大小。

添加-

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

现在一切都应该以类似的方式工作。

Answer 2

这肯定会发生，因为您的浏览器具有不同的字体大小设置，您可以使用代码笔的 this fork 轻松检查它。

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

如果 chrome 和 firefox 中的警报值不同，您一定要检查您的字体大小设置。

Answer 3

有完全相同的 "issue"。在我的例子中，它与 Windows 10 放大的字体和项目大小有关。

Firefox 考虑到了这一点，当设置为 125% 时，所有内容都会放大 1.25 倍。而 chrome 则没有。

因此 14px 在 Firefox 中变为：在显示器上为 17.5px，在 chrome 中保持为 14px。

Answer 4

在Chrome中可以查看chrome://settings/appearance验证属性"Font size"，推荐值为"Medium" .

就我个人而言，我的值 "Large" 和 css 属性（如边距、填充、行高、字体大小）看起来完全不同。将 "Font-Size" 设置为 "Medium"

全部解决

Rems rendering differently between Chrome and Firefox