Как исправить разные отступы у Chrome (с включенным DirectWrite API)?
Всем известно, что с версии 37 у Chrome прорисовка шрифтов немного изменилась, и это принесло проблемы с отступами у элементов. Например, для элементов списка заданы отступы (padding) в единице em. В старых версиях Chrome все хорошо отображается, в новых версиях Chrome (после 37) уже отступы стали больше. Как выйти из сложившейся ситуации, чтобы отступы были одинаковыми, независимо от включенной поддержки DirectWrite API в Chrome?
Решение с отключением chrome://flags/#disable-direct-write не предлагать, т.к. посетители сайта все-равно будут с этим включенным флагом.
Удостоверьтесь, что ваше значение padding достаточно однозначно округляется до эквивалентного целочисленного пиксельного значения. Например, при эффективном размере шрифта 13 пикселов `0.2em` — это 2,6 пиксела, и чтобы вычисленное пиксельное значение было более предсказуемым, вместо `0.2em` следует использовать более точное значение `0.23077em`, почти точно равное 3-м пикселам.
И обязательно задайте высоту строки хотя бы для корневого элемента HTML-документа, например:
HTML {line-height: 1.25; }
В целом же — в веб-разработке важно как можно раньше понять: сайты не должны выглядеть абсолютно одинаково на всех устройствах, во всех браузерах и их версиях.
Простой
