I margini raddoppiati di Internet Explorer 6
Tra i vari bug da più parti segnalati nell’interpretazione css da parte di internet explorer 6, uno dei più fastidiosi è il cosiddetto doubled-margin float. Tale bug si verifica quando, in IE 6 e precedenti, un elemento ha contemporaeamente uno stile float (left o right) e un margine laterale maggiore di zero. Quando si verificano queste condizioni i browser segnalati interpreteranno il margine laterale dell’elemento in questione raddoppiandone la misura.
Difatti alla seguente regola:
box {
width:200px;
float:left;
margin-left:50px;
}
firefox o altri browser che la interpretano correttamente visualizzeranno il corretto margine sinistro:
mentre explorer visualizzarà il margine sinistro raddoppiato (nell’esempio, 50px*2=100px):
Da sottolineare è che il bug si presenta solo quando all’elemento viene assegnato un margine corrispondente alla sua direzione di floating.
La soluzione all’inconveniente è di associare all’elemento lo stile display:inline.
box {
width:200px;
float:left;
margin-left:50px;
display:inline;
}
Tale tecnica ristabilisce, per i browser in questione, le esatte misure segnalate nelle regole margin-left e margin-right e non ha “contro-indicazioni”, considerato che gli altri browser non interpreteranno la regola display:inline in quanto un elemento che ha stile float assume automaticamente proprietà di elemento block-level, come vuole la regola W3C:
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.
da w3c.org - Visual Formatting Model
approfondimenti:
- http://www.w3.org/TR/CSS2/visuren.html#floats
- http://www.positioniseverything.net/explorer/doubled-margin.html
