IE8中的透明PNG周围的黑色边框

Question

I'm experiencing some problemes with a black small border around transparent PNG files..in a jquery slider in IE8.. It works fine in all browsers (including IE6 & 7) but not in IE8.

you can see it here: http://www.socialogika.com/tabs/goliath/collection/

I allready tried several fixes found here on stackoveflow, but none of them seems to be the solution (yet)...turning to PNG-8 from 24 fixed the problem voor Ie6 & 7, but still havind problems in 8

Can someone point me to a working solution?

Answer 1

Let me know if this helps: http://channel9.msdn.com/forums/TechOff/257324-IE7-alpha-transparent-PNG--opacity/

I have done a lot of research into the IE7 png with opacity issue and have used two workaround which cover most, but sadly not all scenarios.

The first one has already been mentioned in this thread which is to have different image files for the different opacities needed. This method works for well for mouseover and mouseout effects when you just want to show state, but is sadly useless when you want to animate the opacity.

The second method will work most of the time but it depends on your pagelayout and design. To fake the opacity animation of a div you can position a dummy second div over the real div you want to show an opacity change on. The second div should be absolutely positioned and take on the width and height of the background div. Depending on your page design you then give it a background colour (whatever best suits the real background image png) and you animate the opacity on that div to fade in or out depending on the effect you are looking for.

Because you will be using javascript for the opacity animation anyway, it is simple to create and insert the new div when the effect is needed and remove it once you are done. This allows the actual divs content to still be copy and pasted or right clicked by visitors to the site.

Also, perhaps try confirming my hunch that it's the opacity that's causing the black border to show: disable all fade effects and let me know if the images render correctly.

Answer 2

Well... try using

.fadeTo()

DEMO

In any case you can use this little fix:

$('#mages img').css({background: '#EDE7DE'});

Or create an if statement for IE where you just add an .fix to the desired images. The .fix is in your CSS file, adding to images a background of the desired color.

if ($.browser.msie && $.browser.version <= 8 )
{
$('#gallery img').addClass('fix');
}