IE8 - Contenitore con margin-top: 10px non ha alcun margine di

Question

EDIT: Questo accade solo in IE8, funziona benissimo in IE7, Firefox, Opera ecc

Prima di tutto, ecco un quadro che ho fatto in photoshop per dimostrare il mio problema: http://richardknop.com/pict.jpg

Ora dovresti avere un'idea del mio problema. Ecco una versione semplificata di markup che sto utilizzando (ho tralasciato contenuti più irrilevante):

<div class="left"> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
</div> 
<div class="right"> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
</div> 
<div class="clear"></div> 
<div class="box"> 
    // 
    // NOW THIS BOX HAS NO TOP MARGIN 
    // 
</div> 
<div class="box"> 
    // box content 
</div> 

E gli stili CSS andare in questo modo:

.clear { 
    clear: both; 
} 
.left { 
    float: left; 
} 
.right { 
    float: right; 
} 
.box { 
    overflow: auto; 
    margin-top: 10px; 
} 

Ovviamente ho lasciato fuori tutti gli stili irreevant come bordi, colori di sfondo e immagini, dimensioni dei caratteri ecc. Ho tenuto solo cose importanti.

Qualche idea di dove potrebbe essere il problema?

Answer 1

Vedere se padding-top: 10px funziona. Potrebbe essere che il margine stia cercando di andare dalla parte superiore della pagina.

Answer 2

Prova a chiudere il tuo clear div.

<div class="clear"></div> 

Answer 3

Non ho proprio questo approccio. È possibile avvolgere il gruppo <div> con la classe destra e sinistra in un altro <div> e applicare overflow: hidden, width: 100% in modo che gli elementi sotto elementi flottanti vengano visualizzati correttamente.

Answer 4

enter code here Provare a utilizzare un contenitore con una larghezza con overflow: nascosto attorno ai div floated e rimuovere il div eliminato.

<div id="container"> 
     <div class="left">  
      <div class="box">  // box content </div>  
      <div class="box">  // box content </div>  
      <div class="box">  // box content </div> 
     </div> 
     <div class="right">  
      <div class="box">  // box content right </div>  
      <div class="box">  // box content </div>  
      <div class="box">  // box content </div> 
     </div> 
    </div> 
    <div class="box"> // // NOW THIS BOX HAS NO TOP MARGIN //</div> 
<div class="box"> // box content</div> 

E il CSS

#container { width: 100%; overflow: hidden; } 

(scusate, ho lasciato IE7 sulla mia macchina di lavoro per le prove, quindi non posso verificare)

Answer 5

Penso che questo sia un bug di IE8. Si riferisce a un elemento fratello di un div flottante a sinistra e a destra. Con o senza un div di compensazione, l'ultimo elemento unfloated perde il suo margine superiore in IE8.

Abbiamo testato questo, e solo IE8 sbaglia:

http://www.inventpartners.com/content/ie8_margin_top_bug

Abbiamo inoltre si avvicinò con 3 soluzioni.

Answer 6

Non ho IE8 con me ... ma hai provato ad aggiungere chiaro: sia al div bottom che all'aggiunta di un margine inferiore a uno dei primi float? Sono abbastanza sicuro che otterrebbe lo stesso effetto senza alcuna div extra.

Answer 7

Ho problemi simili e le soluzioni fornite da Matt Bradley non hanno funzionato per me (ma grazie per averlo postato comunque!). Volevo avere margin-top: 10px su un elemento h1.

La soluzione che ho trovato è stata aggiungendo la posizione: relativa, superiore: 10px e margin-top: 0px all'elemento h1.