强制Chrome for Windows尊重子像素行高

Question

我有一个棘手的CSS问题.这是一个事实,即该网站的"主旋律"的CSS是第三方(它无法改变,但我们可以用另一种样式覆盖),以及网页上的所有使用绝对定位布局,加剧尺寸(这不能改变).

在这个第三方CSS的某个地方,我们有这个声明:

body {
    line-height: 1.3;
}

一个div页面上有一个font-size的14px,使得其行高18.2px.这对于典型的网站来说很好.但是,由于所有内容都使用像素位置绝对定位,因此字体渲染差异正在发挥作用.具体来说,Windows中的谷歌浏览器正在将其line-height缩小到18px.这意味着divChrome for Windows 中的大量内容比任何其他浏览器都要短得多.所有其他浏览器似乎都支持亚像素线高度.

有没有办法强制Chrome for Windows尊重子像素行高,这样它的呈现方式与其他浏览器不同？

更新

这是一个JSFiddle,展示了它的不同之处.如果您比较Chrome for Windows和Firefox for Windows中的高度,您会发现0.2px每行都有差异.

Answer 1

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

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

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

我已经用你的小提琴在 Windows 上的 Chrome 和 Firefox 上进行了测试，它可以工作。