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 the body to 100% and then the elements to 0.875em. None of those work. It stills display 1 pixel greater in chrome.

This is the code I'm using for font-sizes:

body {
  font-size: 100%;
}
* {
  margin:0;
  padding:0; 
  text-decoration: none; 
  font-family:helvetica, arial, sans-serif;
}
#geral {
  width:1000px; 
  margin:0 auto; 
  position:relative; 
  font-size:0.875em;
}

Where the #geral wraps the entire site and there is no other font-size statement on the CSS, the source can be viewed in the link I posted.

I wonder if there is a way to fix that or if I'll have to specify different font-sizes for each browser?

Answer 1

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.

Answer 2

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.

Answer 3

<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>

Answer 4

Works fine here:

Chrome 9.0:

Firefox 4.0 beta 10:

Answer 5

if you have web page to print then

add css

<link rel="stylesheet" type="text/css" href="report.css" media="print" />

in css file

body {
    padding: 3px;
    margin: 0.5px;
    background-position: center;
    color: #000000;
    background: #ffffff;
    font-family: Arial;
    font-size: 13pt;
}

this works for me

Answer 6

em is scalable and px is not. Set the font to a defined px size and you should be ok. em can be desirable in certain circumstances, but if you are worried about 1px then you should set strict pixel sizes.

EDIT: Just reread and I see you have tried setting the height as pixels already. Don't have a clue then as I don't have Chrome installed here to test. :(

Answer 7

I'm getting a good enough similarity in rendering between Firefox and Chrome when I use this css (it works because Firefox does not yet implement 'zoom'):

body {zoom: .7}

But it still isn't pixel perfect.

Note that I use 'rem' units instead of 'px' units everywhere, as this works better when I use more than one font on a page.

Note that I've set Windows display resolution to 150% to compensate for my poor vision. When I set it back to 100%, the problem of different sizes remains. So this isn't the issue.

I'm sure there is no standard that says that pages must look the same on different browsers, but using 'zoom' seems to help in this regard.

Unless this scale factor problem is due to a misconfiguration on my computer.

Answer 8

I too have had this problem and I've decided, where possible to go with font-size: small (or x-small etc). This gives you a basic range of scalable font sizes without having to look for fiddily css or messing around with JS. It works with IE, FF and Chrome.