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

Question

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

Answer 1

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

• Flash: Thanks, cross browser transparency seems to be an annoying issue. The background in my page is an image, and I really need the transparent div to size to fit the text (so can't just edit the background image). What I was doing before was setting the transparent div background to a small tiled plain transparent png (this seemed to avoid the antialiasing issues) but this occasionally caused the whole image to appear blank. Is there anything else you can think of that might help?
• Stein G. Strindhaug: If it's important for you to support ancient browsers, you could try to absolutely position the text above an empty div containing the transparent color (the element containing the text must not be a decendant of the transparent one). Unfortunately, this creates a lot of other complications as you cannot rely on the div to resize to fit the content, and stacking order (z-index) is terribly buggy in the older versions of IE. You should do some cost/benefit considerations if semitransparent background is really worth it. Good luck! :)