CSS gradients in IE7 & IE8 is causing text to become aliased
- by Cory
I'm attempting to use a CSS gradient in a div containing some text. With Gecko and Webkit, the text displays fine. In IE7 & IE8 the text appears aliased (jaggy).
I came across this blog stating: "we decided to disable ClearType on elements that use any DXTransform".
IE Blog:
http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx
That was back in 2006; 3.5 years later, I assume this bug would be fixed, but it's not. Is there a way to do this in IE8 without resorting to stuffing a repeating background image in the div?
Here's an example of what I mean.
<style>
div
{ height: 50px;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd);
}
</style>
<div>Hello World</div>
<p>Normal text</p>
In IE, the text in the div is aliased (jaggy), and the text in the paragraph is not.
Any solution that doesn't involve images would be greatly appreciated.
