5

我遇到了一个棘手的 CSS 问题。由于网站“主题”的 CSS 是第三方的（无法更改，但我们可以用另一个样式表覆盖），并且页面上的所有内容都使用绝对定位进行布局和大小（无法更改）。

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

body {
    line-height: 1.3;
}

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

有什么方法可以强制 Windows 版 Chrome 尊重子像素行高，这样它的呈现方式就不会与其他浏览器有很大不同？

更新

这是一个展示差异的 JSFiddle。如果您比较 Chrome for Windows 和 Firefox for Windows 中的高度，您会发现0.2px每行都存在差异。

4

1 回答 1

0

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

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

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

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

于 2014-02-19T07:25:24.287 回答