Css PC Chrome和Mac Chrome计算盒子高度的方式不同

我正在处理的网站的设计要求下划线沿着文本的底部挤压，几乎触及基线。我在后面绝对定位一个带有边框底部的

伪元素来实现这一点，我看到Mac Chrome和PC Chrome中的框高度之间有一个奇怪的不一致

请注意右上角的“访问”链接。这张屏幕截图是Mac Chrome的，它应该是这样的。开发工具声称


看看PC Chrome中同一个站点发生了什么。如您所见，文本和下划线下方有一个小间隙，因为PC Chrome认为相同的元素的框高度为
22px
。

下划线的CSS：

a{
位置：相对位置；
&：：之后{
内容：''；
位置：绝对位置；
顶部：1米；
宽度：100%；
左：0；
边框底部：4px实心；
}
}

如您所见，将下划线定位在两个不同操作系统上不同位置的
1em

这是怎么回事！？
以下是我检查过的情况的总结：


我使用将“匹配X高度”选项打开为“100%”的方式导出woff/woff2文件
两种浏览器都将缩放设置为100%
在这两种情况下，元素的计算字体大小均为22px
计算得出的两个元件的线高度均为22px
这两个元素都有
框大小：内容框

如果盒子模型确实是问题所在，您可以在
a
标记和
：：在
元素之后设置盒子大小属性，以强制一致呈现盒子模型，然后根据需要调整变量

box-sizing: border-box

盲镜头：操作系统缩放级别？默认浏览器字体大小？视网膜屏幕补偿的VM问题？两个操作系统上计算的线高度是否相同？这个答案有用吗@Kaido缩放级别相同，字体大小都计算为22px。我很难排除虚拟机的问题，但是这个错误是由一个不使用虚拟机的客户向我报告的，所以看起来这不是问题的原因。我希望它是那么容易：-）@sol这个答案实际上是启发我尝试用FontSquirrel重新转换字体的原因。他们没有详细说明，但我使用了他们描述的相同设置，得到了相同的结果：-/它们都是
内容框
。您能在codepen或类似的编辑器中重新创建并发布链接吗