BigThink

PNG trasparenti su IE6

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!

Articolo scritto da Ghido

Fondatore di BigThink.it, si occupa dello sviluppo e del coordinamento dei progetti tecnologici. Specializzato nel Marketing su Facebook e nello sviluppo di Applicazioni Social, fa consulenza e formazione ad aziende ed agenzie.

Leggi anche...

Installare diverse versioni di Internet Explorer

Installare diverse versioni di Internet Explorer

Il problema con cui qualunque webmaster prima o poi dovrà scontrarsi è la cosiddetta compatibilità crossbrowser, ovvero fare in modo che il nostro nuovo sito che abbiamo appena creato — della cui grafica andiamo particolarmente orgogliosi, perfettamente validato W3C e con layout table-less — si veda allo stesso modo su tutti i browser. Non ...
[Invito] Conferenza free (virtuale) su Seo e Traffico Web!

[Invito] Conferenza free (virtuale) su Seo e Traffico Web!

Saluto tutti i lettori di BigThink. Oggi voglio proporvi una Tele Conferenza free (virtuale) su SEO e Traffico Web che terrò Giovedi 29 alle 21:30 con il grande Alex Billico, che ha organizzato altre Tele Conferenze simili con personaggi di grosso calibro come Robin Good, Marco De Veglia, Giulio Marsala, Carlo D’Angiò, Daniele D'Ausilio ...
Centrare un div dentro un altro div

Centrare un div dentro un altro div

Visto che — statistiche alla mano — i miei post sui CSS sembrano essere apprezzati, continuo su questa strada. Vediamo oggi come centrare gli elementi delle nostre pagine, in particolare i div. Com'è noto, per centrare un testo rispetto al suo contenitore, è sufficiente un semplice text-align:center. Cosa che non funziona con i div. Bisogna infatti ...
PagePeel: script gratis

PagePeel: script gratis

Un ottimo strumento di advertising alternativo al classico banner è il cosiddetto PagePeel — conosciuto anche come PageEar, Peel Ad, Peel Away o Magic Corner. Si tratta di un elemento Flash che simula lo sfogliare di una pagina e richiama molto l'attenzione del lettore che, incuriosito, andrà ad appoggiare il mouse e a ...
Migliora la qualità del tuo sito internet in pochi semplici passi

Migliora la qualità del tuo sito internet in pochi semplici passi

Per progettare un sito internet è necessario un approccio diverso da quelli tradizionalmente utilizzati come ad esempio la produzione di un’automobile o la costruzione di una casa, in quanto: Comporta la strutturazione di un’ampia e complessa rete informativa che deve essere ben chiara e ...

3 Commenti

  1. Ghido

    Ottimo, grazie mille!

    4 settembre 2008, 00:06
  2. Dario

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

    3 settembre 2008, 23:42

1 Citazioni