IE9 letter-spacing problem
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>
Answer
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.