IE: bug dei float che sfuggono    

Setup

Di seguito abbiamo un box con margini e bordi. All'interno vi sono dei div quadrati di 50px flottati a sinistra. Dopo i float si trova un div col 'clear' per far contenere i float dal box principale.

In Opera e Mozilla va bene, ma guardate su IE/win e avrete una sorpresa.

Problemi principali

In Explorer per Windows ci sono due errori: il contenitore ha solo l'ultima riga di float e i float vanno a destra verso il limite dello schermo! Via gente, non è kosher.

Screenshot in IE6

Tanto per buttare sale sulla ferita, 'sto bug fa anche comparire una barra di scorrimento orizzontale su parecchie risoluzioni di schermo. Armeggiate con la dimensione della finestra del browser e vedrete come l'ultima riga di float sporga dal contenitore facendo comparire la barra. Interessante.

Questo disastro nel CSS di IE/win è dovuto alla mancanza di una dimensione data per il contenitore col bordo nero (div.floatholder). Se date una "width" al box IE si comporterà correttamente. Tuttavia, ci sono layout in cui si vuole lasciare il contenitore "widthless". E allora, come risolviamo il bug senza dare una larghezza?

Ne viene fuori che una "height" risolverà a sua volta il bug, ma un'altezza assegnata impedirà al contenuto di controllare l'altezza del box. Se si tratta di contenuto testuale e viene ridimensionato dall'utente, la lunghezza del testo non corrisponderà più all'altezza del box. Usare gli em per l'altezza del box non serve, in quanto se si varia la larghezza dello schermo la lunghezza del testo viene comunque influenzata. Sembra senza speranza, vero?

L' Holly Hack

Invece un'altezza può essere data a IE/win senza influenzare l'altezza visualizzata del contenitore. Questo perchè IE ha un altro comportamento non standard che riguarda i box e le loro dimensioni. Quando IE/win vede che un box ha una data altezza che non è sufficiente a contenerne il contenuto, IE/win tira dritto e allarga erroneamente la dimensione in modo da non far fuoriuscire il contenuto dai bordi del box.

Si potrebbe pensare che è una buona idea, ma se il box è un float e viene allargato oltre la sua dimensione data, questo può spingere in basso la pagina dove ha più spazio, mandando a rotoli il layout.

Comunque, poichè IE/win si comporterà così, si può applicare un'altezza piccolissima al contenitore e IE/win lo renderà comunque più alto. Così una piccola altezza non cambia l'aspetto del box, ma il nostro bug è risolto!

Per completare l'opera non ci resta che nascondere l'altezza a tutti i browser tranne IE/win. Così ecco l'Holly Hack:

/* Nasconde IE-mac \*/
* html .floatholder {height: 1%;}
/* Fine per IE-mac */

La prima riga è un commento CSS con un 'escape' (in rosso) prima del tag di chiusura del commento. A causa dell'escape, IE/mac ignora il tag di chiusura e crede che il commento sia ancora attivo. Così ignora tutto finchè non vede il tag di chiusura del commento CSS. L'ultima riga è un normale commento, e dopo il suo tag di chiusura IE/mac ricomincia ad elaborare il codice.

La seconda riga ha un selettore universale seguito da 'html' (anch'esso rosso) seguito dall'elemento di destinazione. Questo seleziona .floatholder se è all'interno di html (vero) e anche se 'html' è dentro qualsiasi elemento. Accade infatti che i browser IE hanno un elemento contenitore misterioso che contiene 'html', e così questo selettore funziona solo in IE. Bisogna impedire che IE/mac lo veda, perchè non ha questo bug e non allarga il box come IE/win..

L'Holly Hack in azione

Sotto abbiamo lo stesso demo di prima, con l'aggiunta dell'Holly hack:

Altri usi

L'Holly hack si può usare per correggere un buon numero di altri bug nel float di IE/win oltre a questo. Posto che una dimensione risolve un problema in IE/win, potete usare l'Holly hack invece di una larghezza, lasciando il vostro layout liquido intatto.
Grazie Holly! :-)

Info speciale

Il velo che copriva il bisogno di una dimensione del box per evitare molti bug di IE è stato parzialmente sollevato, grazie alla scoperta di una (sinora) oscura pagina nel sito di Microsoft. Non c'è una vera spiegazione di questa proprietà "hasLayout", ma almeno adesso abbiamo una struttura per la follia che ci ha inflitto Microsoft, per cui è importante. Sembra che un box abbia bisogno di "Layout" oppure sarà un inferno di bug. MS non lo afferma specificamente, ma i comportamenti di IE non lasciano dubbi a riguardo.