The same font looks different in Chrome vs. Firefox, IE and Safari

Question

The issue is connected with rendering font in different browsers. I was surprised to see the issue is reproduced only in Chrome. It works fine in Firefox, IE8, Safari and even IE6.

Here comes the sample.

And here comes the code itself:

<div style="position:absolute;bottom:2px;padding-top: 1px;width:100%;">
   <span style="float:left;">
      <div id="saveCustomizationButton" class="smallBlueButton">
         <span>Speichern</span>
      </div>
   </span>
   <span style="float:right;padding-right:1px;">
      <div id="downloadOrPrintButton" class="smallGreenButton smallGreenButtonSmallLetterSpace">
         <span>Downloaden oder drucken</span>
      </div>
   </span>
</div>

div.smallGreenButton span, div.smallGreenButton a {
    display: block;
    line-height: 14px;
    padding: 1px 7px 2px 13px;
}
div.smallGreenButton {
    font-family: arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
}
div.smallBlueButton {
    font-family: arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
}

That is it. I've read about css reset, and have tried it. Any miracle -nothing's changed. Another way I was considered to use was fixing the width of the container tag. But due to the necessity to maintain multiple localisations I can't use this approach.

I hope smb will propose a solution. Or I'll need to implement some browser-specific behavior.

Waiting for your comments. Thanks in advance.

Solution

Text rendering does differ from browser to browser.Sometimes no matter how much we try to change the rendering, we won't get it. You can read this article if you want. It does not provide a solution(I don't think there is one) to this problem but it highlights the differences.

Comments

[Marcin]

What's the question here? It's just a fact about Chrome that its font rendering on windows is not that great.

[godspeed]

The question is if there is any magic in css or somewhere else to fix the issue without creating a chrome-specific style.

[David Diez]

@godspeed As far as I know, no there is not. Each browser renders fonts it's own way. You could style the font for that box just for Chrome via javascript but not sure if there are more options...

[godspeed]

David Diez, do you know any font which is rendered in the same way in all browsers?

[godspeed]

> Srinivas Thanks for the link. No Chrome there. I do understand that there could be no solution. I read that Safari and Chrome use the same rendering engine. It made me thinking there is magic for Chrome to fix the issue.