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 | <style type="text/css"> img, div { behavior: url(css/iepngfix.htc) } </style> |
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 | <script type="text/javascript"> if (document.all && document.styleSheets && document.styleSheets[0] && document.styleSheets[0].addRule){ document.styleSheets[0].addRule('img', 'behavior: url(iepngfix.htc)'); document.styleSheets[0].addRule('div', 'behavior: url(iepngfix.htc)'); } </script> |
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!




Ottimo, grazie mille!
Qua ce ne sono indicate un altro po’…
http://tinyurl.com/5wme8d
ciao!