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

时间:2013-10-29 21:32:30

标签: css google-chrome

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

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

body {
    line-height: 1.3;
}

页面上的div font-size 14px,其行高18.2px。这对于典型的网站来说很好。但是,由于所有内容都使用像素位置绝对定位,因此字体渲染差异正在发挥作用。具体来说,Windows中的Google Chrome将line-height向下舍入为18px。这意味着div中的大块内容在Chrome浏览器中的渲染时间明显短于任何其他浏览器。所有其他浏览器似乎都支持亚像素线高度。

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

更新

Here's a JSFiddle证明了这一点。如果您比较Chrome for Windows和Firefox for Windows中的高度,您会发现每行有0.2px个差异。

1 个答案:

答案 0 :(得分:0)

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

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

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

我已经在Windows上使用Chrome和Firefox上的小提琴进行了测试,但它确实有效。