Как исправить разные отступы у Chrome (с включенным DirectWrite API)?

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

И обязательно задайте высоту строки хотя бы для корневого элемента HTML-документа, например:

HTML {line-height: 1.25; }

В целом же — в веб-разработке важно как можно раньше понять: сайты не должны выглядеть абсолютно одинаково на всех устройствах, во всех браузерах и их версиях.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы