IE8, transparent PNG and filter: alpha

Question

I'll get straight to the point. Here's the conclusion:

(now some optional code is to 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 (abbreviated only for the relevant material, 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 know that I can leave with one span and just switch the background-position logo to hover, but all CSS functions migrate CSS3 transitions for real browsers that should not scroll the logo up and down.

OK, so this is PNG with 32-bit color depth and, of course, transparency. Everything is fine in IE8, when I do not use the alpha filter or filter:alpha(opacity=0) . But with an opacity of 100, just using a filter makes IE8 go crazy and make all non-fully transparent pixels 100% opaque. Not that this particular image looked so bad with this effect, but it is still annoying: D.

Now I know well that IE8 is notorious for transparent PNG issues, with issues related to IE6 and its hideous blue filling of transparent areas. This could be fixed with some black magic of IE behavior.

What can be done with IE8?

Answer 1

You need to use the AlphaImageLoader filter, as for IE6.

Answer 2

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

Obviously, this fix is ​​not always useful (that is, if you cannot use the background color below your png, which mimics the real background).

Answer 3

This worked for me:

 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png', sizingMethod='scale', alpha(opacity=100)); 

Thanks SLaks !!

Answer 4

Use filter:none in your class :hover .