Округление по высоте

Question

Похоже, что хром округляет значение вычисленного значения line-height,

Например:

line-height:1.33 с font-size:11px будет вычислено line-height:14px,

В то время как точное значение 14.66 поэтому я ожидаю, что высота строки будет равна 15 пикселей

Знаете ли вы, есть ли способ заставить браузер округлять вычисленное значение вместо округления в меньшую сторону?

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, Это было бы одинаково во всех браузерах.