How to maintain PNG alpha transparency when using "-ms-filter" property

Question

I have the following HTML:

<a><img src="myfile.png" /> Some text</a>

And this css:

a:hover
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: .75;
}

The problem with this occurs in both IE 8 and IE 7.

When the PNG image is subject to the -ms-filter or filter, its alpha transparency is ruined. Try it out and you will see. It is a bug in both IE 8 and IE 7.

Can I remove the "-ms-opacity" and "filter" properties applied in CSS? What is the syntax for this? (e.g. something like -ms-filter: "";)

Does anyone know a work around to this issue?

Answer 1

UPDATE: AlphaImageLoader filter applied directly to the img may override the Alpha filter. As for removing a filter have you tried filter:none; ?

Yes, programmically target IE6 and below with conditional comments.

<!--[if lt IE 7]>
<style>a:hover{filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);}</style>
<![endif]-->

Also scripts like IE7-js will handle PNG transparency for you without cluttering up your CSS with non-standard code.

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Answer 2

Just embellishing SpliFF's answer, I could fix this problem by adding the following jQuery to my page:

$(function() {
    if (jQuery.browser.msie)
        $('img[src$=.png]').each(function() {
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
            });
});

This will apply the AlphaImageLoader too all PNGs in the page.