Html 相同的REM测量会导致不同的像素值

我使用的是REM值。在较小的屏幕尺寸下，我的基本字体大小相当于9像素：

html {
    font-size: 56.25%;
}

（16px 56.25%=9px）

我注意到Chrome根据测量内容计算像素值的方式有所不同。例如：

我有一个

元素。其高度由线条高度决定：6.3rem（6.3x9px=56.7px）

Chrome将其计算为57px

但是，如果我将代码更改为

header { height: 6.3rem; }

Chrome计算为57.69px

如果我有一个绝对位于标题下方的导航：

nav { position: absolute; top: 6.3rem; }

Chrome将顶部距离计算为56.7px

这些差异证明是一种痛苦，因为标题和导航具有不同的背景颜色，边框和镀铬呈现出这些亚像素差异

为什么浏览器会以不同的方式呈现相同的度量值

请点击此处：

---

在Chrome中，底部显示的是一个亚像素边框，但不应该显示。尽管出于某种原因，在JSFIDLE中它工作得很好。

线条高度的行为非常复杂。。。（）

你做的计算很好，但即使你写

行高：56.7px它将在Chrome工具中显示
行高：56px

无论如何，如果您希望使用高度和长方体边框进行工作，请执行以下操作：

header {
  height: 6.3rem;              /* ADDED */
  line-height: 6.3rem;
  border-bottom: 1px solid black;
  font-size: 2rem;
  box-sizing: border-box;     /* ADDED */
}

演示

html，正文{
字体大小：56.25%；
}
身体{
保证金：0；
}
标题{
高度：6.3rem；/*增加*/
线高：6.3rem；
边框底部：1px纯黑；
字号：2rem；
框大小：边框框；/*已添加*/
}
导航{
位置：绝对位置；
顶部：6.3rem；
左：0；
右：0；
背景颜色：黄色；
字号：2rem；
}
标志和汉堡
导航列表
是否尝试添加
框大小：边框
？这不是问题所在。问题是相同的rem值会导致不同的像素测量值。这并不能解释为什么三个（线高、高度和绝对值）完全相同的测量值会导致三个不同的像素测量值。你读过我放的类似主题吗？我不打算复制/粘贴主要答案的大量解释。不只是线条高度会给出不同的结果，而且位置：绝对会给高度带来不同的结果。我还没有测试过，但这是否意味着REM中的填充、边距和其他测量会导致不同的像素测量。
header {
  height: 6.3rem;              /* ADDED */
  line-height: 6.3rem;
  border-bottom: 1px solid black;
  font-size: 2rem;
  box-sizing: border-box;     /* ADDED */
}