我有一个棘手的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
个差异。
答案 0 :(得分:0)
我要做的是将line-height
更改为乘以一个整像素的东西。在你的情况下:
line-height: 1.2857142857142857142857142857143; /* = 18 / 14 */
这会稍微改变输出,并导致跨浏览器兼容的结果。
我已经在Windows上使用Chrome和Firefox上的小提琴进行了测试,但它确实有效。