Sviluppo » Software » Internet » CSS

Internet Explorer 6: eliminare il baco del doppio margine

martedì 16 dicembre, 2008

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’.

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , , , ,

6 commenti a: “Internet Explorer 6: eliminare il baco del doppio margine”

  1. 16 dic, 2008 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

    Rispondi Quota
  2. 16 dic, 2008 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

    Rispondi Quota
  3. 16 dic, 2008 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 )

    Rispondi Quota
  4. 09 gen, 2009 DIGITALife » IE6: Double Margin Solution & GUI Tips:

    [...] ci spiega semplicemente come eliminare il problema del doppio margine in IE6, la bestia nera dei web [...]

  5. 18 dic, 2009 Fabio:

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

    Rispondi Quota
  6. 15 gen, 2010 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.

    Rispondi Quota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>                                  // blocco generico
<code></code>                                // blocco generico
[cc_actionscript][/cc_actionscript]          // Actionscript
[cc_actionscript3][/cc_actionscript3]        // Actionscript 3
[cc_css][/cc_css]                            // CSS Style Sheet
[cc_html][/cc_html]                          // HTML
[cc_js][/cc_js]                              // Javascript
[cc_objc][/cc_objc]                          // Objective-C
[cc_php][/cc_objc]                           // PHP
[cc_sql][/cc_sql]                            // SQL