Rems在Chrome和Firefox之间呈现不同的呈现方式 [英] Rems rendering differently between Chrome and Firefox

问题描述

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

I've noticed a slight issue using rems when it comes to comparing how they render in Chrome and Firefox.

使用以下CSS:

html {
  font-size: 62.5%;
}

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

渲染后的结果略有不同，Firefox显示的框比在Chrome中显示的框短:

The results are slightly different when rendered, Firefox shows the box shorter than it looks in Chrome:

有什么办法可以阻止这种情况发生吗?

Is there something I can do to stop this happening?

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

推荐答案

由于您的浏览器具有不同的字体大小设置，因此很肯定会发生这种情况，您可以使用

That happens most certainly because your browsers have different font-size settings, you can easily check it with this fork of your codepen.

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

如果警告值在chrome和firefox中不同，则应绝对检查字体大小设置.

If the alerted values are different in chrome and firefox you should definitely check your font-size settings.

这篇关于Rems在Chrome和Firefox之间呈现不同的呈现方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！