{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Juvenile、少年° 的问题《IE9 letter-spacing problem》','https://www.manongdao.com/q-485093.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
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?
Try setting the letter-spacing value firmly for whole document, so it will display same in IE and FF.
You can reference the article by Microsoft. may be the problem because by Text Rendering