Baseline inconsistency in fonts between Firefox/Mac and Safari/Mac or Firefox/Win

Noticing a strange rendering anomaly in Firefox 3.5/3.6 (haven't tried other versions) in Mac OS X. Looking around, I've seen similar issues reported and addressed, but most were surrounding CSS line-height being set to normal as opposed to a unit measurement.

Take the following code:

<style>
    h1{
        background-color:#f00;
        font-size:40px;
        line-height:40px;
    }
</style>

<h1>This is a test</h1>

In Firefox for Mac, the text baseline sits higher than in the other browsers -- including Firefox for Windows. Has anyone confronted this issue before? It's only Firefox for Mac that is开发者_运维百科 the odd browser out. I also noticed that this is font-based; changing to Arial, for instance, renders consistently everywhere. Unfortunately, changing font is not an option for me. And I'd like to avoid creating images of typography if I can.

I'm grateful for any insight! Thanks for taking a look!

You've presented a very compelling example of the slight differences between the font rendering on on Firefox for Mac versus other browsers. I'd say FF on Mac is getting it wrong here as even setting vertical-align: baseline; doesn't change the result.

That said, there's absolutely no reason to to use images here to emulate any one browser's rendering. A website need not look the same in all browsers.

The issue probably arises due to Mac and Safari tuned to typography far more than any other browser or operating system. It's more likely to correctly display fonts as they should be displayed. I've read about this on countless occasions over the years but, unfortunately, can't recall any of it beyond that. I'm sure someone will come along with a link that explains this further.

I know this is an old question but I stumbled upon it when looking for a workaround for the same problem. From a lot of research and testing it appears to be one of those 'Windows against the rest of the world' type things (surprise surprise!) so here's my jQuery fix...

var OSName="";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="windows";
$('html').addClass(OSName);

Then I just targetted the h1 with html.windows h1 to fix the difference with css on Windows.

Might help someone in the future!