Font-size issues comparing chrome and Firefox

I suggest you use a CSS reset like the one from YUI. It will make your pages much more consistent across all browsers, including font rendering. It makes the biggest difference with IE and the other browsers, but it gets rid of all manner of inconsistencies.

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.

<script>     if(navigator.userAgent.indexOf("Chrome") != -1 )     {         var fontsize = "<style>body{font-size: 125%;}</style>";    }    else if(navigator.userAgent.indexOf("Opera") != -1 )    {         var fontsize = "<style>body{font-size: 100%;}</style>";    }    else if(navigator.userAgent.indexOf("Firefox") != -1 )     {         var fontsize = "<style>body{font-size: 100%;}</style>";    }    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10    {         var fontsize = "<style>body {font-size: 100%;}</style>";    }      else     {         var fontsize = "<style>body {font-size: 100%;}</style>";    }    </script><script>document.writeln(fontsize);</script>