title: CSS gradients in IE7 & IE8 is causing text to become aliased
body: <p>I'm attempting to use a CSS gradient in a div containing some text.  With Gecko and Webkit, the text displays fine.  In IE7 &amp; IE8 the text appears aliased (jaggy).</p>
  
  <p>I came across this blog stating: "we decided to disable ClearType on elements that use any DXTransform".</p>
  
  <p>IE Blog:
  <a href="http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx" rel="noreferrer">http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx</a></p>
  
  <p>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?</p>
  
  <p>Here's an example of what I mean.</p>
  
  <pre><code>&lt;style&gt;
      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);
      }
  &lt;/style&gt;
  
  &lt;div&gt;Hello World&lt;/div&gt;
  &lt;p&gt;Normal text&lt;/p&gt;
  </code></pre>
  
  <p>In IE, the text in the div is aliased (jaggy), and the text in the paragraph is not.  </p>
  
  <p>Any solution that doesn't involve images would be greatly appreciated.</p>