前言：最初我只记住 Windows，但在 Mac Air 上测试了一段时间后，我意识到那里的情况更糟。尽管在实际代码中它不是那么麻烦，尽管存在一些不一致之处。
这是测试 http://jsbin.com/ehegaj/6/edit
简而言之，发生了什么事。我在应用line-height属性的地方有标题，这始终是一行标题，所以我锁定了高度只是为了适合字体。在不同的浏览器（和操作系统）中，您可以看到不同的文本布局。有什么想法可以解决吗？
UPD：这里http://jsbin.com/uzucuf/1/edit是我所做的真实工作的非常接近的例子，同样它并不像上面的示例测试那么糟糕，但仍然有移动像素。
UPD2：
做了更多的测试，主要集中在 Windows 7 上，并且包含带有不同行高的不同浏览器的测试屏幕截图的图像。您可以看到它们之间的视觉不一致。
它大约是 1px，所以实际上我可以通过使用 line heeight 29px 并为 IE 提供不同的 line height 30px 来修复它。虽然我只是将其保留为 30px 行高并忽略 safari，所以在这一点上我很好。
所以只是好奇为什么会这样？这种渴望迫使花费几个小时浏览不同的资源：
这家伙，看起来也有同样的问题，但只是摆脱了寻找问题的原因。
其他人建议只使用偶数值，line-height在我看来这有点奇怪:) 如果我在这里做错了，请纠正我。
其他一些但有点不相关的话题只是很感兴趣继续阅读。
最后，看起来我找到了答案，它有点模糊但实际上是有道理的。
1. 三组行距值
由于根深蒂固的 TrueType 和 OpenType 字体格式的历史原因，每个 webfont 都带有三组行距值。在 System 7 中引入的“旧 Mac”集。在旧 Mac OS 中，如果字形到达“旧 Mac”行距线的上方或下方，则字形将被垂直挤压以适应。
在 Windows 3.1 中引入的“旧 Windows”集，其中任何高于或低于“旧 Windows”上升线和下降线的轮廓部分都不会出现在屏幕上（因此字形会被裁剪）。一套“印刷版”，据说没有其他两组的限制。
然而，问题是许多 Windows 应用程序仍然使用“旧 Windows”值。通常这样做是为了防止从旧应用程序创建的文档中回流。在 Mac OS X 上，挤压不会发生，但大多数应用程序仍使用“旧 Mac”值。
这个包袱被带到了浏览器中。Mac OS X 上的 Chrome 使用与 Windows 上的 Chrome 不同的一组值；Windows 7 上的 Firefox 使用的值集与 Windows XP 上的 Firefox 不同，Windows 7 上的 Firefox 使用的值集与 Windows 7 上的 Chrome 不同。同一浏览器的 Mac 和 Windows 版本将使用不同的值集，而不同同一操作系统上的浏览器也可能使用不同的值！在理想的世界中，简单的解决方案是字体代工厂确保所有三组值导致相同的结果。但是许多现有的字体是在构思 webfonts 之前创建的，字体创建工具并不能让字体设计师轻松地使这些值“正确”。
简而言之：有许多字体的行间距值会导致跨操作系统和跨浏览器的不一致。
但我仍然不是 100% 肯定是这样。可能有人做出更好的猜测并给出更明确的答案，就像对孩子的解释一样:)？