Alla caccia dei bachi di explorer per il float!

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 🙂

lauryn

Web designer dal 2002, mi occupo di content marketing per la società WordSteps SLT LTD di Edimburgo e altri clienti. Vivo a Milano, sposata con una figlia e due cagnoline, e una passione per libri e Scozia.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

%d blogger hanno fatto clic su Mi Piace per questo: