Rems在Chrome和Firefox之间呈现不同的呈现方式

Question

在比较他们在Chrome和Firefox中渲染的方式时，我注意到使用rems的一个小问题。

使用以下CSS：

html {
  font-size: 62.5%;
}

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

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

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

这是一支笔：http://codepen.io/abbasinho/pen/WbJWNq

Answer 1

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

alert(document.querySelectorAll('.rem-test').item(0).scrollHeight);

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

Answer 2

有完全相同的“问题”。在我的情况下，它与Windows 10放大的字体和项目大小有关。

Firefox考虑到这一点，当设置为125％时，将所有内容放大1.25倍。虽然铬没有。

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

Answer 3

在Chrome中，您可以查看chrome：// settings / appearance并验证属性“字体大小”，建议值为“中”。

就我个人而言，我的值是“ Large”，而css属性（例如margin，padding，line-height，font-size）看起来完全不同。将“字体大小”设置为“中等”都解决了

Answer 4

由于使用html的字体大小（即正文的字体大小为5px，然后20rem将为100px）计算rem，因此您需要在浏览器中使用统一的字体大小。

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

添加 -

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

现在一切都应该有效。