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 had a situation where I wanted backgrounds of text areas to be certain colours fading horizontally to white and defined by hexadecimal in the CSS. I wanted to avoid making colour background images in case a non-developer member of my company wanted to add a new colour with hexadecimal only.

The solution I found was to make a 24-bit PNG of white gradienting into transparent set to the width of the area I was making.

I then used this IE-only hack to get the CSS to render a background colour of my choice that fades to white:

background /*\**/: #CCCED4 url('/white_to_transparent.png') repeat-y top left\9;

(the hack could be improved, but it works for me, including IE9)