Con jQuery la risoluzione del problema del mancato supporto di Internet Explorer 6 alla trasparenza delle immagini PNG di sfondo si risolve con poche righe di codice. Se invece utilizzate il semplice JavaScript la procedura è un pò più complessa. Vediamola insieme.
Aggiungete come prima cosa una classe CSS speciale agli elementi che hanno bisogno della trasparenza PNG (ad esempio ie6-fix-opacity). Quindi inserite il seguente codice in un file JavaScript che chiamerete ie6-fix-opacity.js:
var pngFixIE6 = function() {
var elements = document.getElementsByTagName('*'),
len = elements.length,
i;
for(i = 0; i < len; i++) {
var element = elements[i];
var cls = element.className;
if(cls.indexOf('ie6-fix-opacity') != -1) {
var bgImg = element.currentStyle.backgroundImage;
var image = bgImg.substring(bgImg.indexOf('"') + 1, bgImg.lastIndexOf('"'));
element.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + image + "', sizingMethod='scale')";
element.style.backgroundImage = 'none';
}
}
};
window,onload = function() {
pngFixIE6();
};
Infine, aggiungete il file JavaScript creato tramite commenti condizionali:
<head>
<!--[if IE 6]>
<script type="text/javascript" src="ie6-fix-opacity.js"></script>
<![endif]-->
</head>