html - 向上取整行高

Question

似乎 chrome 向下舍入了 computed 的值line-height。

例如：

line-height:1.33withfont-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。这在所有浏览器中都是相同的。