向上舍入线高

Question

似乎chrome会将计算出的line-height的值向下舍入。

例如：

带有line-height:1.33的

font-size:11px将计算line-height:14px。

虽然确切的值是14.66，所以我希望行高等于15px

您知道是否有办法强制浏览器将计算值向上舍入而不是向下舍入？

Answer 1

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

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

#elm {
    transform: translateZ(0);
}

Answer 2

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

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

然后，只要您将行高设置为某个值，例如line-height: 2.2rem;它最终会成为22px。这在所有浏览器中都是一样的。