[ITA] Risolvere il problema delle PNG trasparenti su Internet Explorer

Come risolvere il problema della trasparenza delle immagine PNG su Internet Explorer 6?

E’ risaputo che ogni browser applica gli standard secondo la propria interpretazione, come è risaputo anche che Internet Explorer non li applica alla perfezione… Però dato che è il browser più utilizzato al mondo è bene che ogni sito web venga visualizzato correttamente su questo browser.

E per risolvere questo problema c’è un javascript che fa al caso vostro, che con un hack risolve questa incompatibilità (che è stata risolta su IE 7).

/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<mce:script defer type="text/javascript" src="pngfix.js" mce_src="pngfix.js"></mce:script>
<![endif]-->

*/

function correctPNG() { // correctly handle PNG transparency in Win IE 5.5 & 6.
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters)) {
for(var i=0; i<document.images.length; i++) {
var img = document.images[i] var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
" style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
"(src=\'" + img.src + "\', sizingMethod='scale');\">"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);

Questo script non funziona per le PNG nei CSS. Per fixare quest’altro problema ci viene in aiuto la proprietà filter di IE.

Per esempio se avete un’immagine PNG che utilizzate come background:

#image {
background: transparent img.png no-repeat top left;
}

aggiungendo filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=’scale’, xsrc=’img.png’); e sostituendo la PNG con none:

#image {
background: transparent none no-repeat top left;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale', xsrc='img.png');
}

risolverete il problema delle PNG nei CSS 

Enjoy with IE Hacks…