[Original title: IE 9 text renders very poorly; is there a workaround?)
IE 9 is rendering the text in my application very poorly. The problem is not in my monitor's Clear Type settings, since IE 9 in compatibility mode, Firefox, and Chrome all render text nicely. Here's a side-by-side comparison of how the text is rendered with IE 9, IE 9 in compatibility mode, and Chrome:
I tried applying this answer, but it doesn't seem to apply to anything after IE 7. Does anybody know of any workarounds we can apply to our site to fix IE 9's bad text rendering?
Edit:
I've boiled down the problem page to the bare essentials. As you can see, it doesn't take much to reproduce. Be sure that IE has a browser mode if IE9 and document mode of IE9 standards:
<html xmlns="http://www.w3.org/1999/xhtml">
<body style="background-color: rgb(30, 34, 59); color: rgb(255, 85, 0); font-size: 20px">
Home
</body>
</html>
Short answer: this is an issue when you specify font sizes in pt (points), rather than pixels.
So what happens is that the new IE9 rendering engine uses DirectWrite, which won't snap to the nearest pixel as it did with GDI+, so if your pt size doesn't map to a whole pixel number, it will draw it exactly that way, which makes it appear blurry.
The IE8 compatibility mode wouldn't suffer this issue as it uses regular GDI rendering that we are used to.
So check out all your style sheets etc and if you are asking for point size font's, that's exactly what will be given in IE9, and depending on your font used etc, your point size might or might not map to a crisp and clear size.
This is explained in detail here:
It seems setting opacity:.9999
on body
renders the text in IE9 standards mode a lot more similar to how it does in Quirks mode.
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