【发布时间】：2013-11-09 06:42:38
【问题描述】：
我遇到了一个棘手的 CSS 问题。由于网站“主题”的 CSS 是第三方的（无法更改，但我们可以用另一个样式表覆盖），并且页面上的所有内容都使用绝对定位进行布局和大小（无法更改）。
在这个第三方 CSS 的某个地方，我们有这样的声明：
body {
line-height: 1.3;
}
页面上的div 具有14px 的font-size，使其行高为18.2px。这对于典型的网站来说很好。然而，由于一切都是绝对使用像素位置定位的，因此字体渲染差异正在发挥作用。具体来说，Windows 中的 Google Chrome 将这个line-height 向下舍入为18px。这意味着div 中的大块内容在 Windows 版 Chrome 中的呈现时间比在任何其他浏览器中要短得多。所有其他浏览器似乎都支持亚像素行高。
有什么方法可以强制 Windows 版 Chrome 尊重亚像素行高，这样它的呈现方式就不会与其他浏览器有很大不同？
更新
Here's a JSFiddle 展示了差异。如果您比较 Chrome for Windows 和 Firefox for Windows 中的高度，您会发现每行存在0.2px 的差异。
【问题讨论】：
-
您确定其他浏览器不将 18.2 舍入到 18 吗？
-
我检查了 Chrome 和 Firefox 上的开发工具。 Firefox 显示 18.2 像素，但我猜在光栅化字体时，所有内容都会在整个像素上对齐。
-
它们的渲染肯定不同。每行
0.2px累加成多行。 -
查看我的更新，@kleinfreund。您可能看不到差异，因为
0.2px很小，但在我的情况下，这会产生明显的差异，因为有很多行。 -
尽可能不要使用像素。
标签： css google-chrome