向上舍入行高

看起來，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

回答