Menu
I have a page that renders ok, in FF (3x, 4x), Chrome, IE (6, 7, 8).
When tested on IE9 the texts are wider. Investigating the problem it appears that the text is actually rendered whith letters more spaciated than in other borwsers.
When changed the letter spacing to -0.6px the texts was rendered ok, similar to other browsers. Also when changed the render mode to "Compatibility view", the page looks just fine.
Do you know what caused the change in the render mode?
I "solved" the issue using the conditional comment, but I'm not very happy about it
<!--[if IE 9]>
<style>
* {letter-spacing: -0.6px;}
</style>
<![endif]-->
Does any other methods exists to solve the problem?
Edit
I made a few screenshots on different machines and different browsers and the result can be seen here
As you can see, on different machines with different browsers the result is the same. The only one that renders differently is IE9 in standard mode. the source page is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
body {margin:0;padding:0;}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc semper.
</body>
</html>
648
It may have to do with rounding up/down. Using tenths of a px is a strange thing to do since you can't get less than a whole pixel on a screen unless you know how the rounding will go. You can't rely on IE to get anything right anyway.
126
Try this as this work with Internet Explorer 8 and Firefox:
letter-spacing:0.49px;
letter-spacing:0.88px !ie;
MSIE will floor the first letter-spacing to 0px and ignore the second rule. Firefox will read the second rule and use it instead of the first rule.
Then, to compensate, you can use the same trick and add more horizontal padding to your text in MSIE that what you give to in Firefox.
Of course, make further tests with other browsers!
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
