Google chrome 使用css保持文本高度一致

在一个大型测试套件中，我正在测试如何详细解释布局，并发现Mac和Linux上的Google Chrome计算文本区域大小的方式不同，请参见以下JSFIDLE：

我可以告诉您，mac将

框渲染为：

{
  "top": 8,
  "bottom": 25,
  "left": 8,
  "right": 84,
  "width": 76,
  "height": 17
}

而Linux将其呈现为：

{
  "top": 8,
  "bottom": 26,
  "left": 8,
  "right": 84,
  "width": 76,
  "height": 18
}

我当然可以让测试更加灵活，但由于测试结果将在稍后由计算机进行分析，所以让盒子大小保持一致是非常重要的

---

还值得注意的是，该解决方案只需要在最新版本的谷歌浏览器上运行，如果改变字体系列就可以解决问题，那也没关系。但是我不想为了接近真实世界而添加一堆自定义CSS属性，因为在现实世界中，我无法控制CSS。但是，在这个测试套件中，我控制CSS，所以它是可以接受的。

当您不指定

行高时，浏览器将应用默认值，这应该取决于字体。设置
行高
并不保证所有浏览器对行框使用相同的高度，但这只是一个开始。
字体本身决定了跨距的大小。每个有问题的操作系统上使用的字体必须在各个方面都相同，才能保持一致。同意。网络世界与印刷世界大不相同。那么每个操作系统上都有相同的字体吗（不一定要漂亮）？这有什么帮助？在CSS中，您无法解决一个操作系统上使用的字体字体轮廓比另一个操作系统略高或略窄的问题，您也无法强制执行一致的前导。调整行高和调整字体大小一样有用：你可以这样做，但它不会使你在每个浏览器中都获得像素级的完美渲染。@cimmanon，这很有帮助，因为问题是关于“文本高度”和“框大小”，而不是关于字形的高度或宽度。这不起作用，请参阅。在MAC上，高度是
17px
，而在Linux上，高度是
18px
。未替换内联元素的垂直大小取决于浏览器（并且可能远远超过当时设置的
行高度
值，如实验所示）。如果使用块元素，或设置
span{display:block}
，则
行高度值设置行框的最小高度。