Per chiarire e completare il discorso già fatto sul float di cui abbiamo già parlato analizzando un sito, vediamo quali sono i due bachi principali su internet explorer e come risolverli.
IE RADDOPPIA IL MARGINE LATERALE
Il primo e più fastidioso è quello che porta explorer 6 e precedenti ad aggiungere, su due o più box flottanti, il doppio del margine laterale sinistro.
Il risultato? Che all’improvviso vediamo “scomparire” il secondo o terzo box per poi ritrovarcelo sotto agli altri, perchè si ritrova con una somma di margin, padding e width maggiore di quella prestabilita e non trovando spazio si dispone sotto.
Non basta (e non sempre si può) azzerarlo, ma la soluzione più semplice è dare ai due/tre box flottanti un bel display: inline; che dispone i box uno di fianco all’altro, ed essendo una proprietà implicità nel box flottante, che esso sia un “elemento di blocco”, non crea problemi negli altri browser e possiamo quindi utilizzarlo tranquillamente nel css ad integrazione della nostra dichiarazione di float.
IL PEEK-A-BOO BUG (BACO DEL NASCONDINO)
Questa è forte: se disponiamo due box consecutivi, uno flottante e l’altro no, succede che il secondo magicamente “scompaia”. In realtà esso esiste, e basta provare a selezionare il contenuto testuale del secondo box, dove dovrebbe trovarsi, per rendersi conto che esso esiste, ma non lo vediamo!
Soluzione: diamo un line-height, ad esempio un line-height: 1.2em; al blocco contenitore, anche se questo è già definito in box padri o nel body: ripetiamoglielo, tanto per gradire 🙂
Non chiedetemi perchè, ma funziona. Parola di Gianluca Troiani. Un mito 🙂
