It looks like IE7 and IE8’s PNG transparency isn’t quite perfect.  If you use a transparent PNG and a IE filter, then it looks like you’ll loose your alpha transparency.

The Problem

1
2

#content h2 {background:url('../images/bkg.png') repeat-y transparent;}
#ie #content h2 {filter: dropshadow(color=#fff, offx=0, offy=1);}

Which looks like this:

The grey stripes should be light blue. But the PNG with alpha transparency in IE isn’t rendering right.

Once I took off the filter, the PNG works as expected.

The Work Around

If you must use MS filters, then just specify the standard IE6 PNG fix filter at the end of your CSS Rule.

1
2
3
4

#ie #content h2 {
  filter: dropshadow(color=#fff, offx=0, offy=1);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/bkg.png",sizingMethod='scale');
}

Why This Happens

IE7 & IE8 brought PNG alpha transparency support. However, the IE team used the same method as the popular IE6 PNG fixes—the AlphaImageLoader. Only IE7 and IE8 applies the filter automatically. Now for the problem: IE can only apply one filter at a time. If you apply two, the last one wins.

So when I add the dropshadow filter, it overwrites the automatically-applied AlphaImageLoader filter for the PNG alpha transparency, causing PNG’s to render as they would natively in IE6.

Note: The dropshadow filter reeks havoc on your text anti-aliasing. Try to avoid it.