IE8, transparent PNG and filter:alpha

Question

I'll cut right to the point. Here's the output:

(now some optional code - read only if you really want to ;))

Here's the markup:

<a href="/" id="logo_wrapper">
    <span class="logo logo_normal"></span>
    <span class="logo logo_hover"></span>
</a>

Here's the CSS (shortened only to the relevant stuff, for your reading pleasure):

#logo_wrapper {
  position:relative;
}
#logo_wrapper .logo {
  display:block;
  width:260px;
  height:80px;
  background-image:url(logo.png);
  position:absolute;
}
#logo_wrapper .logo_normal {
  background-position:0 0;
}
#logo_wrapper .logo_normal:hover {
  opacity:0;
  filter:alpha(opacity=0);
}
#logo_wrapper .logo_hover {
  background-position:0 -80px;
  opacity:0;
  filter:alpha(opacity=0);
}
#logo_wrapper .logo_hover:hover {
  opacity:1;
  filter:alpha(opacity=100); /* THIS IS THE OFFENDER! */
}

Just to clarify: I'm aware I can get away with a single span and just switching the logo's background-position on hover, but the full CSS features cute CSS3 transitions for real browsers that aren't supposed to scroll the logo up and down.

OK, so, it's a PNG with 32 bit colour depth and, of course, transparency. All is fine in IE8 when I use no alpha filter at all or filter:alpha(opacity=0). But with the opacity set to 100, the mere use of the filter causes IE8 to go crazy and make all not entirely transparent pixels 100% opaque. Not that this particular image looks all that bad with this effect, but it's still annoying :D.

Now, I'm well aware IE8 is notorious for transparent PNG problems, with the troubles dating back to IE6 and its hideous solid cyan fill of the transparent areas. That one could be fixed with some IE behaviour black magic.

What can be done about IE8?

Answer 1

A simple fix: just add a background color to .logo_hover:hover and alpha filter works fine again.

Obviously this fix is not always useful (that is, if you can't use a background color below your png that mimics the real background).