Internet Explorer 6 e le precedenti versioni per Windows presenta diversi bug nell’elaborazione dei blocchi flottanti.
Nella maggior parte dei casi questi errori possono essere corretti usando i commenti condizionali specifici per ogni versione del browser.
Uno dei più diffusi problemi è la gestione dei Margini: Internet Explorer 6 e precedenti per Windows raddoppia il margine laterale corrispondente a quello specificato per la proprietà float.
La soluzione, in questo caso, risulta molto semplice: basta dichiarare l’elemento flottante come in-linea usando la dichiarazione display: inline.
Questa soluzione non ha controindicazioni in quanto un blocco flottante è implicitamente un elemento a livello di blocco, il che vuol dire che non ci saranno variazioni nel layout del sito.
Un secondo problema molto frequente è il cosiddetto peek-a-boo che si presenta quando un box, con sfondo assegnato e altezza e larghezza non assegnate, contiene un box flottante, del testo che si dispone attorno a tale box senza superarlo in altezza e un box con assegnata la proprietà clear.
Il bug è presente solo nella versione 6 di Internet Explorer e ha come conseguenza la scomparsa del testo che affianca il box flottante; tale testo ricompare selezionandolo con il mouse oppure ridimensionando i caratteri.
La soluzione consiste nello specificare l’interlinea per il blocco contenitore tramite la proprietà line-height. Il metodo funziona anche se la proprietà è ereditata, per esempio dichiarandola nel body.
Un terzo problema riguarda il blocco successivo ad un blocco flottante: quando il blocco successivo ad un blocco flottante ha almeno una delle due dimensioni dei contenuti impostata, il blocco non si posiziona indipendentemente dal blocco flottante che lo precede ma si dispone di fianco al box flottante e, nel caso di Internet Explorer 6 e precedenti, anche spostato di 3 pixels.
La soluzione consiste nel rendere anche il blocco successivo flottante, agendo su i margini per ottenere l’effetto desiderato.