The same font differs from Chrome compared to Firefox, IE and Safari

The issue is related to the font rendering in different browsers. I was surprised to see that the problem is reproducible only in Chrome. It works great in Firefox, IE8, Safari and even IE6.

Here's an example.

enter image description here

And here's 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's all. I read about css reset and tried it. Any miracle, nothing has changed. Another way I thought to use is to set the width of the container tag. But due to the need to support multiple localizations, I cannot use this approach.

I hope smb offers a solution. Or I will need to do some kind of browser specific behavior.

Waiting for your comments. Thanks in advance.

+3


source to share


1 answer


Rendering text differs from browser by browser . Sometimes, no matter how much we try to change the rendering, we won't get it. You can read this article if you like. It doesn't provide a solution (I don't think there is one) for this problem, but it does highlight the differences.



+3


source







All Articles