Ormai si sa, il browser che peggio supporta gli standard è sempre lui, Internet Explorer. Ancora ancora la versione 7, ma la 6 è davvero scandalosa.

Oltre ai vari problemi legati alla visualizzazione dei CSS e via dicendo, è noto il bug delle PNG trasparenti. IE6 si rifiuta semplicemente di mostrarci la trasparenza, sostituendola con uno sfondo grigio. Bello…

Stiamo parlando delle PNG-24 che, a differenza delle solite GIF, supportano colori a 24 bit e ci permettono di utilizzare ben 256 livelli di trasparenza. Un’altra cosa rispetto alle pessime GIF! Vediamo allora come risolvere il problema su IE6, perchè (purroppo) non possiamo obbligare tutti a passare a FireFox.

Esistono diversi hack CSS e javascript adatti allo scopo. Molti usano la proprietà filter, applicando manualmente il filtro AlphaImageLoader di proprietà Microsoft, ma ciò comporta un minimo di personalizzazione e sporca un po’ il codice della nostra pagina.

Quello che vi propongo è IE PNG Fix che, con una sola riga di codice, correggerà il malefico bug: le nostre immagini e sfondi PNG si vedranno senza alcun problema. Intanto scaricate lo zip che contiene i file necessari: una GIF trasparente 1x1px e il file iepngfix.htc che contiene il codice javascript. Uploadateli ad esempio nella cartella contenente i vostri file css.

Ora è sufficiente aggiungere alla pagina questo codice:

1
2
3

Se siete puristi della validazione, potrebbe non piacervi usare la proprietà behavior (non considerata valida W3C). L’alternativa è aggiungerla tramite javascript:

4
5
6
7
8
9
10

Si può applicare il behavior ai tag img e div, ma anche solo a classi specifiche. Come preferite.

E un’altro bug di IE6 è fixato! Buon lavoro!