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.
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.
source to share
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.
source to share