IE7 and "jaggies" around layered PNGs (with jQuery)

I seem to be experiencing "jaggies" (jagged pixelation, black in this case) around PNG files, specifically with anti-aliased edges such as rounded borders (say, a large glossy button for example) in IE7. I think I've experienced this issue before, however it may not have been as obvious in a previous design.

Thing is, it only appears when I fade the PNG (and in this case, fade in another for a snazzy rollover effect) because initially, it appears fine.

Anyways, I'm not too certain where the issue stems from, however here is a brief dump of the involved code; hopefully there's a resolution.

Screen

Before and after respectively

jQuery

$(document).ready(function(){
    $('.mf_fader').hover(function(event){
        $('> *:first-child', $(this)).stop().fad开发者_如何学运维eTo(450, 0);
        $('> *:last-child', $(this)).stop().fadeTo(350, 1);
    }, function(event){
        $('> *:first-child', $(this)).stop().fadeTo(350, 1);
        $('> *:last-child', $(this)).stop().fadeTo(450, 0);
    });
});

CSS

#dbc_main-letsgo,
#dbc_main-letsgo > div{
    width: 460px;
    height: 150px;
}

#dbc_main-letsgo > div{ background-image: url(../img/btn_main-letsgo-default.png); }
#dbc_main-letsgo > div + div{ background-image: url(../img/btn_main-letsgo-hover.png); }

.mf_fader{
    position: relative;
    display: inline-block;
}

.mf_fader > *{
    position: absolute;
}

.mf_fader > * + *{
    display: none;
}

HTML

<a href="#" id="dbc_main-letsgo" class="mf_fader">
    <div></div><div></div>
</a>

I'm assuming it's something to do with IE's poor PNG support, so maybe I'm stuck.

Every time I use opacity/fades etc on transparent PNG's in IE, i get exactly the same thing.

Also, I have visited many sites that have the same problem. It makes me feel better when I see people who boast being jquery experts have the same issue on their transparent pngs.

As far as I know it's an IE problem. If you find a way to animate opacity on Trans png's in IE without the black border...please post.

I have had to on a couple of occassions go from a fade effect to a show/hide effect

Sadly this has to do with IE 7's lame attempt at supporting PNGs. With the epic fail of 6, MS promised support in 7 and that somewhat fell through.

You can use a gif or an 8 bit PNG here though and get better results.

What I do is make a browser check for IE 7 and if I detect 7 I then switch to hide show as opposed to fades.

Hope that helps.

Yeah, this is due to IE's poor PNG support.

One thing you can do to fix this is easily is that if the background behind the transparent png is a solid color, you can give the div element with the png image background-color attribute as well.