在Mac和Windows上,Chrome的rem计算在字体大小和行高之间有区别吗?

时间:2018-07-14 01:55:52

标签: html css google-chrome web

我整理了一支非常基本的笔来演示这里发生的事情:https://codepen.io/anon/pen/ZjbmWE

And a screencap for those of you who don't have a Mac

基本上,我想做的是在整个Web应用程序中使用rems进行大小调整,但是即使在两个平台上的Chrome浏览器中查看该应用程序,我也注意到Mac和Windows之间的大小调整不一致。

我看到的是,在设置html { font-size: 50%; }时,Mac上的计算字体大小最终为9px,而不是我期望的8px(假设默认浏览器大小为16px)。这不会有问题,除了Chrome显然仍使用8px作为计算基于rem的字体大小的基础,而仍使用9px计算基于rem的行高(如我们在笔中所见)。

如果您检查笔中的<span>并查看计算出的样式(在Mac上为Chrome),则会注意到字体大小为16px(8 * 2),但行高是18px(9 * 2)。因此,对于rem在字体大小和行高之间的含义,我们有两种不同的解释。

这是一个错误,还是我错过了什么?

0 个答案:

没有答案