问题
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>
回答1:
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.
回答2:
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!
回答3:
Another thing to consider now that it's been seven months since you asked this question is that starting in June 2011, version 5 of FireFox began a rapid release schedule. They are now up to version 8 and as a quick test, I see that version 7 and 8 of FireFox both render text nearly pixel-perfect with IE9. Chrome seems "squished" by comparison as the kerning is much tighter and the clear-type rendering in Chrome (to my eyes) is harsher than both IE9 and FF7/8.
You're not going to be guaranteed cross-browser matched font rendering, let alone cross-platform. All the browsers I looked at default to (on Windows) Times New Roman, 16pt text for "normal" display. If your application requires rendering of text to the level of matching for all users, all browsers, all platforms, then render it as an image and cache it.
回答4:
Try setting the letter-spacing value firmly for whole document, so it will display same in IE and FF.
回答5:
This is also happening to me in IE8 for some reason. Neither decreasing the font-size or setting a letter-spacing solved the problem.
In another thread, I saw that this might be related to font-face. Unfortunately I haven't found a solution yet, but as soon as I find it, I'll post it here. May not help you at this time, but it may help the people who access this question later.
回答6:
humeniuc
Are you sure that youre using the default font face or using some different ? This may cause the probl
回答7:
You can reference the article by Microsoft. may be the problem because by Text Rendering
回答8:
Afraid I don't have IE9 on this machine - will try and look again tomorrow on a PC that does, but my immediate thought is that the w3c validator says your HTML is invalid.
It doesn't like the fact that your text is directly in the BODY and isn't in some other container. I just wondered if that was the issue? Perhaps the other browsers are 'correcting' on your behalf and assuming a paragraph container.
Does the appearance change if you put the text inside a paragraph or a DIV?
回答9:
I have always found that the most useful way to set font size across browsers is using em not px values.
I tend to set up the base point in the body tag in CSS:
font-size: 62.5%
Then whenever I wish to set a font size I use an em value such as:
font-size: 1.1em;
This equates to 11px. The advantage I have found is that it renders more consistently across browsers and also resizes better using the browser resize controls.
Give this a try - I think it should solve your problem.
Thanks nathj07
来源：https://stackoverflow.com/questions/5512169/ie9-letter-spacing-problem