14
How to fix fading transparent PNGs in IE8
The most exciting post ever added to the internet, this is not. After spending far too long searching for solutions that defeated Microsoft’s IE8 and it’s lack of web compatibility, however, I felt the need to post my solution in hopes I might help some other poor soul out there looking for the same answer.
I use loads of css with background images rather than IMG tags inside by HTML. This solution doesn’t address transparency for div’s you want to fade that have background images assigned by css unfortunately. I ended up doing a workaround for that, placing the img inside the div and fading the background:none div instead.
So, for all other transparent PNG’s, I added this handy bit of code in my DOM ready and BOOM, all is good.
// Fix fading transparent PNGs in IE
var i;
for (i in document.images) {
if (document.images[i].src) {
var imgSrc = document.images[i].src;
if (imgSrc.substr(imgSrc.length-4) === ‘.png’ || imgSrc.substr(imgSrc.length-4) === ‘.PNG’) {
document.images[i].style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’crop’,src='” + imgSrc + “‘)”;
}
}
}