向上舍入线高 [英] Round up line-height

问题描述

似乎chrome将舍入计算的 line-height 的值。

It seems that chrome round down the value of the computed line-height.

例如：

line-height：1.33 with font-size：11px 将计算 line-height：14px 。

line-height:1.33 with font-size:11px will have computed line-height:14px.

虽然确切的值是 14.66 ，所以我希望line-height等于15px

Whereas the exact value is 14.66 so I would expect the line-height to equal 15px

你知道有没有办法强制浏览器舍入计算值而不是舍入？

Do you know if there is any way to force the browser to round up the computed value instead of round down?

推荐答案

Chrome会将小数截短为整数像素值。其他浏览器（FF）将四舍五入到最接近的整数像素值。他们将使用十进制值来计算子值。

Chrome truncates the decimals to an integer pixel value. Other browsers (FF) will round to the nearest integer pixel value. They will all use the decimal value for calculating child values though.

您可以尝试使用translateZ来强制元素中的文本被图形加速，这可能允许文本的子像素渲染。

You could try using translateZ to force the element with the text in it to be graphics accelerated, this "may" allow sub-pixel rendering for the text. If it does work it will likely only work in Chrome.

#elm {
    transform: translateZ(0);
}

这篇关于向上舍入线高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！