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

【问题标题】：Rems rendering differently between Chrome and FirefoxChrome 和 Firefox 之间的 Rems 呈现方式不同
【发布时间】：2015-04-27 10:15:17
【问题描述】：

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

使用以下 CSS：

html {
  font-size: 62.5%;
}

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

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

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

【问题讨论】：

【解决方案1】：

这肯定是因为您的浏览器有不同的字体大小设置，您可以使用 codepen 的this fork 轻松检查。

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

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

【讨论】：

【解决方案2】：

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

就我个人而言，我的值是“Large”，而 CSS 属性（如边距、填充、行高、字体大小）看起来完全不同。将“Font-Size”设置为“Medium”，一切都已解决

【讨论】：

【解决方案3】：

有完全相同的“问题”。就我而言，它与 Windows 10 放大的字体和项目大小有关。

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

所以 Firefox 中的 14px 变为：显示器上的 17.5px 而在 chrome 中它保持在 14px。

【讨论】：

【解决方案4】：

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

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

添加-

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

现在一切都应该类似。

【讨论】：