Che c'è di sbagliato
Un designer posiziona a cuor leggero un float a sinistra in un box contenitore, e usa un margine sinistro sul float per spingerlo lontano dal lato sinistro del contenitore. Sembra semplice, no? Bè, lo è finchè la pagina non viene vista su Explorer per Windows. In questo browser il margine sinistro del float è stato miseriosamente raddoppiato!
Come dovrebbe essere
Il grafico qui sotto mostra un semplice div (box marrone rossiccio) che contiene un div flottato a sinistra (box verde). Il float ha un margine sinistro di '100px', che produce uno stacco tra il limite sinistro del box contenitore e il limite sinistro del float. Sin qui va bene.
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*Quest'ultimo valore si applica al margine sinistro di 100px */
}
La "reazione" (a scoppio ritardato) del vecchio IE
Lo stesso codice visto in IE/Win viene mostrato in un modo leggermente diverso. Il grafico che segue mostra quello che combina IE.
Che succede? Non fate queste stupide domande! Questo è IE, ricordate? La conformità con le specifiche la si può sperare, ma non aspettare. Il fatto puro è semplice è che accade.
Punti importanti
Questo bug si verifica solo quando il margine del float va nella stessa direzione del float, direttamente tra il float e il limite interno del box contenitore. Tutti i float successivi con un margine simile non mostreranno il margine raddoppiato. Solo il primo float in ogni riga di float soffrirà del bug. Inoltre il margine raddoppiato ha una sua simmetria, ossia funziona sia a destra che a sinistra.
Alla fine, una soluzione!
Fino ad oggi (gennaio 2004) questo bug era ritenuto irrisolvibile, e lo si controllava rimpiazzando il margine errato con il padding sinistro su un float non visibile, insieme con un box interno annidato usato come box visibile all'interno del float invisibile, oppure si usava un hack per dare un valore di margine dimezzato solo a IE/win. Funziona, ma crea rumore di fondo ed ingarbuglia il codice. Bè, tutto questo ora è finito.
Steve Clason ha scoperto una soluzione, illustrata nel suo demo, che elimina il margine raddoppiato oltre ad una curiosa indentazione del testo. Si tratta di un tipo di soluzione classica per IE, ossia usare una proprietà per risolvere un bug che influenza una proprietà non correlata.
Cos'è quindi?
Segnatevelo: mettere semplicemente {display: inline;} sul float è tutto quello di cui abbiamo bisogno! Ma vieni! Suona troppo facile, vero? Comunque è vero che basta una semplice dichiarazione di "inline" per fare il lavoro.
Quelli che hanno familiarità con le specifiche sanno che i float automaticamente diventano elementi di blocco, non importa cosa fossero prima di diventare float. Come Steve fa notare citando dal W3C:
9.5.1 Posizionare il float: la proprietà 'float'
«Questa proprietà specifica se un box deve flottare a sinistra, destra o non flottare affatto. Si può impostare per gli elementi che generano box non posizionati in modo assoluto. I valori di questa proprietà hanno i seguenti significati:
left
L'elemento genera un box di blocco che viene flottato a sinistra. Il contenuto scorre sul lato destro del box, iniziando dalla parte superiore (soggetto alla proprietà 'clear'). La proprietà 'display' viene ignorata, a meno che non abbia valore 'none'.
right
Come 'left', ma il contenuto scorre sul lato sinistro del box, iniziando dalla parte superiore.
none
Il box non è flottato. »
Questo vuol dire che {display: inline;} su un float dovrebbe essere ignorato, e infatti tutti i browser non mostrano variazioni quando viene posto in atto, compreso IE. Ma questo in qualche modo fa si che IE smetta di raddoppiare il margine del float. Così questa soluzione si può applicare direttamente, senza usare metodi per nasconderla. Se un browser futuro vorrà intopparsi vedendo questa soluzione, allora useremo l'hack di Tan solo per IE, come spiegato nel demo sul text-jog di tre pixel di IE.
Di seguito ci sono due demo live che usano lo stesso codice di prima, prima visualizzando il bug come al solito, e poi applicando al soluzione 'inline' al float.