Torna all'indice
Articolo originale
Setup: Un box liquido ha un float all'interno e il contenuto appare lungo il lato del float. Tutto ok finchè non lo visualizziamo in IE6. "Eh? Dov'è il mio contenuto?|" Ricaricate la pagina, ma niente. Quando scrollate la pagina, o passate in un'altra finestra per tornare sulla 'scena del crimine' ecco riapparire il contenuto, grande e paccuto!
Il demo: div#floatholder (con bordo punteggiato) viene dimensionato orizzontalmente dai margini, e verticalmente dal contenuto. div#float (bordo marrone spesso) è flottato a sinistra, e contiene un link di prova. Di seguito vi sono diverse righe di testo, alternate con div che contengono altro testo, oltre che link di prova. Poi c'è un div di clear (bordo porpora) e quindi un altro div per dargli la giusta misura.
Per resettare il bug, ricaricate la pagina. Screenshot
I bug: Questo effetto può comparire in un considerevole numero di contesti differenti. Vorrei provare ad elencarli, ma l'articolo diventerebbe molto lungo e mi verrebbe il mal di testa.
Divertitevi con i link:
Provate a cliccare sui link, Questo rivelerà il contenuto mancante, come lo scrolling della pagina.
Se il float è un'immagine linkata, stessa storia.
Ma solo i link all'interno di
div#floatholder e quelli prima del div di clear faranno vedere il contenuto mancante.
Provate l'ultimo link nell'area di contenuto. Bizzarro!
Note speciali: Ripetizioni multiple del div di contenuto può portare a dei comportamenti molto strani. Come sostenuto su css-d, sembra che il bug sia provocato dal div di clear. Quando viene forzato a dare il clear al float, il contenuto precedente dopo il float viene in qualche modo coperto, forse dallo sfondo di div#floatholder (bordo punteggiato).
Da ultimo, questo bug si verificherà anche se
div#float precede div#floatholder, a patto che questo float esterno tocchi davvero
il div di clear all'interno di
div#floatholder!
(oooh, amo i float)
Le soluzioni: Ci sono tre modi per prevenire il bug.
Aggiornamento (4 settembre 2003) Matthew Somerville ha trovato un'altra soluzione al Peekaboo bug! Sembra che se al contenitore che ha il float viene data una 'line-height' (qualsiasi 'line-height') il bug scompaia. Fico. I test mostrano che 'line-height: 1.2;' in genere funziona bene, ma nel caso di elementi figli con diverse dimensioni di font, può essere necessario dargli una propria interlinea per evitare problemi in IE. Grazie Matt (e anche a Mikko Rantalainen, per aver fatto notare che 'line-height' NON ha bisogno di un'unità come valore).
Nuovo aggiornamento (22 gennaio 2004) Il Peekaboo bug è uno di quei bug della suite di IE che subiscono l'Holly hack, spiegato in questa pagina. A differenza di altre soluzioni, questo non ha effetti collaterali conosciuti. Applicate l'Holly hack all'elemento che contiene il float che causa il bug e non avrete più problemi! È una panacea, gente...
Ultime novità! Nuove info (metà del 2004) scoperte sull'uso delle dimensioni su un box. Andate in questa pagina per le sporche news.
Grazie a Simon Willison per lo screenshot.
Holly e John
Contatta Holly
Contatta John
©positioniseverything
Ultimo aggiornamento: 25 agosto 2004
Creato il 7 luglio 2002
