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:

1. Scaricare da questa pagina l’archivio zip, copiare iepngfix.htc nella cartella dei CSS, e il file spacer.gif nella cartella immagini;
2. 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!

Chi ha letto questo articolo, ha gradito anche:

1. CSS e float: blocchi flottanti e altezza del contenitore. Le soluzioni
2. Internet e il web: cosa è? Come funziona?
3. CSS Pseudo-classi: come usarle su IE6+!
4. Cheat Sheets per il Web Design

Tweet