css - 强制 Chrome for Windows 遵守子像素行高

Question

我遇到了一个棘手的 CSS 问题。网站“主题”的 CSS 是第三方的(无法更改，但我们可以用另一个样式表覆盖)这一事实加剧了这种情况，页面上的所有内容都使用绝对定位进行布局和大小(无法更改)。

在这个第三方 CSS 的某处，我们有这样的声明:

body {
    line-height: 1.3;
}

页面上的一个 div 的 font-size 为 14px，使其行高为 18.2px .这对于典型的网站来说很好。然而，由于所有内容都是使用像素位置绝对定位的，因此字体渲染差异开始发挥作用。具体来说，Windows 中的 Google Chrome 将此 line-height 向下舍入为 18px。这意味着 div 中的大块内容在 Chrome for Windows 中呈现的时间比在任何其他浏览器中要短得多。所有其他浏览器似乎都支持亚像素行高。

有什么方法可以强制 Chrome for Windows 遵守亚像素行高，这样它的呈现方式就不会与其他浏览器有太大差异吗？

更新

Here's a JSFiddle证明差异。如果您比较 Chrome for Windows 和 Firefox for Windows 的高度，您会发现每行有 0.2px 差异。

Answer 1

我要做的是将 line-height 更改为乘以整个像素的值。在你的情况下:

line-height: 1.2857142857142857142857142857143; /* = 18 / 14 */

这只会稍微改变输出，并导致跨浏览器兼容的结果。

我已经在 Windows 上的 Chrome 和 Firefox 上使用您的 fiddle 对其进行了测试，它可以正常工作。