Font-size issues comparing chrome and Firefox

Question

I built a site and the problem is, chrome display font-size 1px bigger than Firefox. I tried several ways to match the font-size, specified it in px, in % set t

Answer 1

Fwiw at this date, I myself have just recently learned that good CSS-coding practice is to define absolute font-size only for the HTML or BODY element, and to define all other font-sizes relatively, that is, in terms of this size (i.e., using em or %).

If you do that, you only need single out webkit browsers (Chrome, Safari) from the others (Gecko, IE, etc.). So, for example, you might have defined in your stylesheet,

body {
  font-size: 16px;
}

Then at the bottom of the stylesheet, you can include this

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  Body {
    font-size: 20px;      
    }
}

(See also Chrome conditional comments)

This works for me. But one side-effect is to also rescale any non-text elements that are sized relatively, and this may or may not be desirable.