The same font looks different in Chrome vs. Firefo

问题:

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.

回答1:

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.