当比较rems在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
当比较rems在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
5条答案
按热度按时间k97glaaz1#
这是因为你的浏览器有不同的字体大小设置，你可以很容易地用你的codepen的this fork检查它。
如果警告值在Chrome和Firefox中不同，你一定要检查你的字体大小设置。
wfypjpf42#
在Chrome中，您可以查看Chrome：//settings/appearance并验证属性“Font size”，建议值为“Medium”。
就我个人而言，我的值是“Large”，而css属性如margin、padding、line-height、font-size看起来完全不同。将“字体大小”设置为“中”解决了所有问题
2nbm6dog3#
有着完全相同的“问题”。在我的情况下，它与Windows 10放大的字体和项目大小有关。
Firefox考虑到了这一点，当设置为125%时，所有内容都会放大1.25倍。而Chrome则没有。
因此，Firefox中的14px变为：显示器上为17.5 px，在Chrome中保持在14 px。
t9eec4r04#
由于rem是使用html的字体大小计算的（也就是说，body的字体大小是5px，那么20rem将是100px），因此需要在浏览器之间使用统一的字体大小。
尝试在代码笔中添加修改字体大小。
加入─
现在一切都应该类似地工作。
n6lpvg4x5#
问题的“根源”在于：
1.你永远不会在任何地方设置绝对字体大小，
1.你混合了不同区域的相对长度值。
font-size: 62.5%;是相对于父容器的相同属性的长度（字体高度，间接影响文本宽度）。在缺少父容器的情况下，一些编译的默认值将替代。（见上面@seimen的回答。width: 50%;是父容器的相同属性的相对长度（容器宽度），它不是以rem或字体高度的百分比表示的，因此没有义务满足任何特定的文本量或您的期望。有用的链接：