Arial font width in different browsers. With what it is connected, how to fight?

Question

css

There is a code.
css

 .block {
padding:20px;
background:red;
float:left;
font-family:Arial;
font-size:14px;
}

HTML

<div class="block">
текст текст
</div>

As a result, we get a red block. How it looks in different browsers:


Question! How to deal with the extra two pixels in the width of the block (there may be more or less of them, depending on the length of the text). I understand the problem in rendering fonts in different browsers. Fixed width for .block is not suggested.

Answer 1

If “do not offer to fix the width”, then practically nothing.
The fact that fonts render differently on different operating systems is a known fact and nothing can be done about it.
If block sizes up to a pixel are critical for you, then you need to manage them (block sizes) directly. And if you control them indirectly (through text sizes), errors are inevitable.
If the context of the task were known, then perhaps it would be possible to suggest some half-hearted solutions-crutches. But in this setting, no way.

Answer 2

so it will always be. Do not bother and it is worth looking for universal options

Answer 3

Fonts in pixels... however...