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.