Internet Explorer 6: eliminare il baco del doppio margine

Tra le varie simpatiche “interpretazioni” che Internet Explorer 6 riesce a fare con HTML/CSS, quella del “doppio margine” è sicuramente la più noiosa e frequente. In pratica (udite, udite…) il buon browser Microsoft riesce – misteriosamente – a raddoppiare i margini sugli elementi impostati in float! Dato ad esempio il seguente codice CSS, applicato ad un div con id box:

1
div#box{display:block;width:100px;height:100px;margin-left:100px;float:left}

Si ottiene:

ie6double

Dove è n è il nostro margine sinistro di 100px! Questo difetto, fortunatamente, avviene solo in determinate circostanze, cioè quando il margine coincide con la direzione del float e quando il nostro div#box si trova a diretto contatto con il suo contenitore. Questo significa che un ulteriore div#box sulla stessa riga non soffrirebbe del problema in quanto si troverebbe a sinistra non più il contenitore ma il div#box precedente. Ovviamente il problema non è specifico del margine sinistro ma risulta speculare; invertendo il tutto si produrrebbe lo stesso identico problema con il margine destro!

Soluzione

La soluzione è davvero semplice: basta inserire la dichiarazione display:inline nel nostro CSS e il difetto scompare:

1
2
div#box{display:block;width:100px;height:100px;margin-left:100px;float:left;
display:inline}

L’introduzione di display:inline verrà ignorata da tutti gli altri browser e non perchè siamo particolarmente fortunati ma bensì da specifiche W3C:

…The ‘display’ is ignored, unless it has the value ‘none’.

  • http://maurizio.mavida.com maurizio

    non ho capito una cosa:
    nella definizione della classe devono essere presenti sia il display:block che il display:inline. ?
    lasciando solo il secondo presenta lo stesso difetto?

    grazie

  • http://www.undolog.com Giovambattista Fazioli

    @maurizio:

    non ho capito una cosa:
    nella definizione della classe devono essere presenti sia il display:block che il display:inline. ?
    lasciando solo il secondo presenta lo stesso difetto?grazie

    Il display:block lo puoi sostituire con display:inline

  • http://francescogavello.it Francesco Gavello

    Ricordo che fu uno dei primi bug ai quali mi trovai di fronte con IE6.
    Perlomeno in questo caso la soluzione è quantomeno immediata (purché la si conosca :P )

  • Pingback: DIGITALife » IE6: Double Margin Solution & GUI Tips()

  • Fabio

    Sei un grande, ti farei un monumento! Chiaro, semplice e veloce! Ottimo post

  • Ivan Maio

    Sei un GRANDE! funziona benissimo. finalmente i miei pulsanti si vedono solo una volta. Il comando “display:inline” risolve una miriade di problemi di IE.

  • http://mediolego.altervista.org mediolego

    Non li ha risolti a me; ho sostiituito display:block con display:inline e mi ha sfasato tutto sia in Ie che in chrome