预言：最初我只记得Windows，但在Mac Air上进行了一段时间的测试后，发现它更糟糕。虽然在实际代码中它并不是那么麻烦，尽管存在一些不一致。
这是测试 http://jsbin.com/ehegaj/6/edit
简而言之，发生了什么。我有应用line-height属性的标题，这总是一行标题，所以我锁定高度只是为了适合字体。在不同的浏览器（和操作系统）中，您可以看到文本的区别不同。有任何想法如何解决？
UPD：这里http://jsbin.com/uzucuf/1/edit是我所做的实际工作的非常接近的例子，再次它不像上面的样本测试那么糟糕，但仍有移动像素。
UPD2：
更多的测试主要集中在Windows 7上，并且将测试屏幕截图的图像包含在具有不同行高的不同浏览器中。你可以看到它们之间的视觉上的不一致。
http://imageshack.us/a/img845/6734/testheaders.png它大约是1px，所以实际上我可以通过使用线高度29px并为IE提供不同的线高度30px来修复它。虽然我只是留下30px线高并忽略了safari，所以此时我很好。
所以只是好奇为什么会这样？迫切需要花费几个小时浏览不同的资源：
This guy，看起来有同样的问题，但只是摆脱了发现问题的原因。
Other person建议仅使用line-height的偶数值，这在我看来有点奇怪:)如果我在这里做错了，请纠正我。
Some other但是一点点不相关的主题只是非常有兴趣阅读。
And finaly，看起来我找到答案，它有点模糊，但实际上是有道理的。
1。三组线间距值
由于源自TrueType和OpenType字体格式历史的晦涩原因，每个webfont都带有三组行间距值。系统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之前创建的，而字体创建工具并不能让类型设计者轻松地将这些值设置为“正确”。
简而言之：有许多字体，其中的行间距值导致操作系统和浏览器之间的不一致。
但我仍然不是百分百肯定的情况。可能是有人做出更好的猜测并给出更明确的答案，就像对孩子的解释一样：）？
答案 0 :(得分：2)
这似乎是您使用相同字体遇到不同结果的原因，因为您实际上并没有使用相同的字体。 sans-serif确实是一个变量，不同的浏览器对sans-serif使用不同的字体。如果将其更改为Arial，则所有浏览器都应该相同。
答案 1 :(得分：2)
简而言之：有许多字体，其中的行间距值导致操作系统和浏览器之间的不一致。
这是事实。许多字体的vertical metrics都存在问题。这种字体永远不会跨浏览器对齐。在浏览器中一致地呈现字体的唯一方法是修复其垂直度量标准。
大多数字体提供商允许您在下载之前更新和修复字体的垂直指标。他们可能会以不同方式调用该选项。例如：Fontsquirrel称之为Auto-Adjust Vertical Metrics，myFonts.com称之为Line Height Adjustments。
更多相关内容：Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?
