Prima o poi tutti i web-designer, anche quelli più competenti, si trovano a dover sbattere la testa contro gli strani comportamenti dell’anziano browser della casa di Redmond, Internet Explorer 6. Nonostante il suo utilizzo sia in costante declino, è bene tenerne conto, anche perchè, ahinoi, Microsoft ha recentemente annunciato che continuerà il supporto a IE6 fino al 2014.
Dato che avremo a che fare ancora per un po’ di tempo con la bestia nera, tanto vale attrezzarci per essere pronti, alla bisogna, a tirare fuori l’asso nella manica, e ottimizzare il nostro CSS per rendere uniforme la visualizzazione del nostro sito su tutti i maggiori browser.
1) Blocchi flottanti e altezza del blocchi contenitori
Questo bug riguarda il comportamento di un box contentente uno o più elementi flottanti. Vediamo un esempio di codice HTML:
<div class="contenitore"> <div class="contenuto">Testo e altro</div> </div>
ecco il codice CSS associato:
.contenitore { background: #CCFFCC; }
contenuto { float: left; width: 300px; }
Abbiamo innestato dentro a un blocco un box flottante con larghezza definita (se non specificata, il blocco flottante assume la larghezza di ciò che racchiude, a meno che non si tratti di un elemento rimpiazzato). Dato che i blocchi flottanti sono estratti dal flusso, l’altezza del blocco contenitore non dovrebbe essere influenzata da quella del blocco flottante. In IE6 invece l’altezza del box contenitore è influenzata da quella del box contenuto. Per risolvere questo baco, è necessario riprsitinare il flusso all’interno del blocco contenitore, inserendo un blocco con proprietà clear:both;
dopo il blocco flottante:
<div class="contenitore"> <div class="contenuto">Testo e altro</div> <div class="clear"></div> </div>
clear { .clear: both; }
2) Blocchi flottanti e doppio margine
A volte accade che se al blocco flottante è applicato un margine sullo stesso lato in cui flotta, IE6 raddoppia questo margine. Per risolvere questo baco è sufficiente applicare all’elemento flottante la proprietà display:inline;
che di fatto non ha conseguenze sul layout del blocco, in quanto un blocco flottante è sempre implicitamente un elemento a livello di bocco.
3) Impostare altezza / larghezza minima
#elemento { min-height:150px; height:auto !important; height:auto; }
4) Spazio tra gli elementi in lista
IE6 aggiunge dello spazio verticale tra gli elementi di una lista settati a livello di blocco:
<ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul>
Ecco come settare i CSS per aggirare il problema:
ul { margin:0; padding:0; list-style:none; } li { display: inline; /* bug-fix */ } li a { background: #95CFEF; display: block; }
5) Evitare l’effetto scaletta nelle liste orizzontali
Ecco come evitare l’effetto scaletta nelle liste orizzontali:
<ul>
<li><a href="#"><!-- --></a></li>
<li><a href="#"><!-- --></a></li>
<li><a href="#"><!-- --></a></li>
</ul>
ul { list-style:none; margin:0; padding:0; } ul li { display:inline; margin:0; padding:0; } ul li a { display:block; /*IE6 Hack*/ float:left; height:30px; margin:0 0 0 20px; padding:0; }
6) Incapacità di avere elementi con altezza piccola
Il nostro layout richiede una linea orizzontale separatrice? Ecco il listato CSS:
#horizontal_row{ background: #95CFEF; border: solid 1px #36F; width: 300px; height: 2px; margin: 30px 0; overflow: hidden; /* l'elemento collassa all'altezza definita*/ }
7) Elementi che appaiono scompaiono in modo strano
A volte capita che elementi appaiano scompaiano in modo strano nella pagina, nonostante il nostro html e i CSS siano scritti bene. Per risolvere questo bug, settiamo la proprietà position: relative
al contenitore dell’elemento che appare/scompare.
8) Compatibilità con immagini PNG trasparenti
Se il layout del sito che dobbiamo produrre necessita di immagini con effetti di trasparenza, dobbiamo aggirare il problema del mancato supporto alle png su IE6. Ecco cosa dobbiamo fare:
- Scaricare da questa pagina l’archivio zip, copiare iepngfix.htc nella cartella dei CSS, e il file spacer.gif nella cartella immagini;
- Incollare questo codice nella head della pagina html:
<!--[if IE 6]> <style> * { behavior: url(css/iepngfix.htc) } </style> <![endif]-->
9) L’ultima spiaggia: colpire il browser con la precisione di un cecchino!
Quando non sappiamo più dove sbattere la testa, ecco come dichiarare proprietà CSS selettivamente per i maggiori browser con questo codice:
#selettore { width: 200px !important; /* browsers moderni*/ width: 100px; /* IE6 e precedenti */ } html>body #selettore { width: 150px; !important; /* solo firefox */ }
..oppure con questo codice:
#selettore { background: red; /* browsers moderni */ *background: green; /* IE 7 e precedenti */ _background: yellow; /* IE6 */ }
..o questo codice:
#selettore { color: red; /* tutti i browsers */ color : green\9; /* IE8 and below */ *color : yellow; /* IE7 and below */ _color : orange; /* IE6 */ }
Update! Ecco una lista di hack per i maggiori browser.
10) Internet Explorer: testare il sito su tutte le versioni!
Come verificare che il bug-fix sia efficace su tutte le versioni di IE? Non ci resta che testarlo: dimenticaveti di Multiple IEs o emulatori affini (non sempre affidabili al 100%), con IETester possiamo testare IE8, IE7 IE6 e IE5.5 su Windows 7, Vista and XP con risultati del tutto equivalenti alle versioni orginali (a patto che sulla macchina sia installto Internet Explorer 8 e il .NET framework sia aggiornato). Da provare!
Letture consigliate
IE6 bug fixing: articoli e risorse
Internet Explorer CSS Bugs
Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
Positioniseverything.net: The weird and wonderful world of Internet Explorer
Definitive Guide to Taming the IE6 Beast
9 Most Common IE Bugs and How to Fix Them
10 Awful IE Bugs and Fixes
All CSS Properties Listed Alphabetically
Testare in IE6+ e differenti browser
18+ Handy Tools To Check Cross-Browser Compatibility Issues
13 Ways to Browser Test and Validate Your Work
Internet Explorer Application Compatibility VPC Image