How to fix different indentation in Chrome (with DirectWrite API enabled)?

Question

css

Everyone knows that since version 37 of Chrome, the rendering of fonts has changed a little, and this brought problems with indents for elements. For example, list items are padded in em units. In older versions of Chrome, everything is displayed well, in new versions of Chrome (after 37) the indents have become larger. How to get out of this situation so that the indents are the same, regardless of the enabled DirectWrite API support in Chrome?
Do not offer a solution with disabling chrome://flags/#disable-direct-write, because. site visitors will still be with this flag enabled.

Answer 1

Make sure your value paddingis rounded fairly unambiguously to the equivalent integer pixel value. For example, with an effective font size of 13 pixels, `0.2em` is 2.6 pixels, and to make the calculated pixel value more predictable, instead of `0.2em`, use the more accurate value `0.23077em`, which is almost exactly 3 pixels .
And be sure to set the line height for at least the root element of the HTML document, for example:
In general, in web development, it is important to understand as early as possible: sites do not have to look exactly the same on all devices, in all browsers and their versions.