在 Mac 和 Windows 上,Chrome 在 rem 计算中的字体大小和行高之间的差异?

Aia*_*ias 6 html css google-chrome web

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

为那些没有 Mac 的人准备一个屏幕截图

基本上,我想要做的是在整个网络应用程序中使用 rems 调整大小,但我注意到 Mac 和 Windows 之间的大小调整不一致,即使我在两个平台上的 Chrome 中查看应用程序。

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

如果您检查<span>笔中的 并查看计算出的样式(在 Mac 上使用 Chrome),您会注意到字体大小为 16 像素(8 * 2),但行高为 18 像素(9 * 2)。所以我们对 rem 在 font-size 和 line-height 之间的含义有两种不同的解释。

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