CSS gradients in IE7 & IE8 is causing text to become aliased

Question

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).

Answer 1

I found another inexpensive (bit opaque) solution. The text becomes anti-alised back again, when wrapping the text node and setting each element to relative position. Do not ask why...

Lets assume:

  
  


  

    
I am wrapped, therefore not jagged
  

Hope that helps anyone out there. In this case it's not necessary to use background images or derivates.

Working example in jsfiddle: http://jsfiddle.net/SLZpE/2/