Font-size issues comparing chrome and Firefox

css firefox google-chrome font-size
Iberê picture Iberê · Feb 4, 2011 · Viewed 67.2k times · Source

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

Surreal Dreams picture Surreal Dreams · Feb 4, 2011

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.

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
How can I inspect and tweak :before and :after pseudo-elements in-browser?

I have created some fairly elaborate DOM elements with an :after pseudo-element, and I'd like to be able to inspect and tweak them in either Chrome Inspector or Firebug or equivalent. Despite this feature being mentioned in this WebKit/Safari …

Read More
Problem with absolute positioning in Firefox and Chrome

I don't understand why FF and Chrome render my page differently. Here's a screenie of it in firefox: firefox example http://grab.by/65Bn and here's one in chrome chrome: chrome example http://grab.by/65BB fieldset has a relative …

Read More