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

这种情况肯定会发生，因为您的浏览器有不同的字体大小设置，您可以使用codepen 的这个分支轻松检查它。

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

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