向上舍入行高

看起来，chrome舍入了计算的line-height的值。向上舍入行高

例如：

line-height:1.33与font-size:11px将已经计算line-height:14px。

而精确值14.66，所以我期望的行高度等于15px的

你知道，如果有任何的方式来强制浏览器围捕计算的值，而不是一轮下跌？

我可以问你最后怎么这样做？ – Birowsky

Chrome将小数点截断为整数像素值。其他浏览器（FF）将四舍五入到最接近的整数像素值。尽管如此，它们将全部使用小数值来计算子值。

你可以尝试使用translateZ来强制图形加速的文本元素，这个“可能”允许文本的子像素渲染。如果确实有效，它可能只会在Chrome中运行。

#elm { 
    transform: translateZ(0); 
}

2013-06-24 17:12:57

感谢您指出浏览器的不一致。我尝试了Firefox，它计算为14.66，所以它甚至没有轮。我想知道什么是在保持线高比的同时在浏览器之间进行相同渲染的最佳方式。 –

@pgn - 不幸的是，它们都使用不同的渲染引擎和相关规范的解释。如果translateZ（0）技巧在Chrome上不起作用，那么您只会更深入地陷入疯狂的黑客行为。如果在我的脑海里有一个谚语的枪，我会尝试用SVG或帆布渲染文本。 –

您可以以任何单位指定具体的line-height，例如， line-height: 2.2rem;如果您计算您的rem大小，以便在所有浏览器中均可达到偶数，则可避免舍入问题。如果您设置了默认值：

html { 
    font-size: 62.5%; /* 10px = 1rem */ 
}

然后，每当您将行高设置为某个值时，它将最终成为22px。这在所有浏览器中都是一样的。

2017-10-26 05:44:47 morphatic

回答