使用jQuery淡入淡出的IE Explorer中的PNG周围的黑色

Question

I've searched all day and tried everything to remove the black around my PNGs when I use the Fadein jquery effect in internet explorer. I must be missing something because all the code I use doesn't fix it. My page can be visited here: http://www.kaimeramedia.com/derek/Website

I found this bit of code:

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
/* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
/* IE6 & 7 */
    zoom: 1;
}

but I am unable to get it to work with my menu page ( http://www.kaimeramedia.com/derek/Website/menu.php ) which only looks correct in the index.php template.

The images fade on and off fine in all browsers it just that IE 6+ puts a really thick black border around it. I know there are many sites that discuss this issue, but I haven't had any luck or at least I must be inputting the code wrong.

I tried editing CSS and the style tags below but it didn't seem to have any effect:

div.fadehover {
     position: relative;
}

img.b {
     position: absolute;
     left: 0;
     top: 0;

     z-index: 10;
     opacity: 0;
     filter: alpha(opacity=0);
     background: transparent;
}

.style2 {   font-style: italic;     color: #2D6773; }
.style3 {   color: #122833 }

If someone could help me with a working solution to my site that would be really appreciated.

Answer 1

There are many solutions to this problem:
1) Use a PNG8 instead
2) Use a js script such as Unit PNG Fix
3) Try adding filter: 0 to your image
4) Use and ie filtered background emulating rgba(255,255,255,0)

background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
zoom: 1;

5) Finally, if no transparency is needed, just use a jpg

EDIT: This is how one of the images looks in png8, I don't see any major differences...

Answer 2

I've had this exact same problem which is caused by the css filter-property IE requires. In my animation I remove this attribute.

$('elem').css('filter', '');

The old IEs simply cannot perform. You can "outhack" many of IEs flaws with javascript only causing these browsers to slow down even more.

The best solution is graceful degradation and and progressive enhancement (more of that on http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/ ). Don't make IE do things it can't or cannot do well. I know clients have a hard time understanding this but my days of trying to be a magician are over.