使用css的一致文本高度

Question

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

http://jsfiddle.net/AndrasMadsen/Cspcf/

为了您的信息，我可以告诉mac将<span>框渲染为：

{
  "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
}

我可以使测试更加灵活，但由于结果将在以后由计算机进行分析，因此使盒子大小保持一致非常重要。

还值得注意的是，该解决方案只需要在最新版本的Google Chrome上运行，如果更改font-family解决它，那就没问题了。但我想避免添加一堆自定义CSS属性，以便接近现实世界，我无法控制CSS。但是在这个测试套件中，我控制着CSS，所以这是可以接受的。

Answer 1

当您未指定line-height时，浏览器将应用其默认值，这些默认值应取决于字体。设置line-height并不能保证所有浏览器都使用相同的行高，但这只是一个开始。