Text doesn't anti-alias on transparent background in IE7/8

Example: http://jsfiddle.net/NBWmU/1/

I'm using the following CSS to make the background of my div transparent in as many browsers as possible:

background: rgb(255, 255, 255) transparent;
background: rgba(255, 255, 255, 0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99FFFFFF, endColorstr=#99FFFFFF)";

For some reason in IE8 text on top of the transparent div appears sharp and pixelated, and looks quite different to the same text outside the div on a plain background. I haven't tested in other browsers开发者_C百科 yet.

Does anyone know of a way I can force the text to render the same everywhere? I've tried using a transparent png but this caused some other rendering issues and I'm hoping there is another way.

Yes: don't use -ms-filter and filter:progid:DXImageTransform etc.

There's a bug in the implementation of the filters causing it to use the fallback text renderer. The only way to make it consistent is to either don't use it when text is involved, or use it on all text (so that all text is equally ugly and pixelated).

What I usually do is, i use only standard css for transparency such as rgba() colors, opacity etc. And in the IE-specific css I set the background/text color to an approximate match to how it would look whith real transparency.

And for images I create an IE-specific copy of the image sprite that are transparent. But transparent png's will cause the same problems in ie7 and older, so I usually fall back to full opacity (i.e. not transparent) in ie7.css