html - 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.querySelector('.rem-test').scrollHeight);

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