IE8 - Contenedor con margin-top: 10px no tiene margen

Question

EDIT: Esto ocurre sólo en IE8, que funciona bien en IE7, Firefox, Opera, etc

En primer lugar, aquí hay una imagen que he hecho en photoshop para demostrar mi problema: http://richardknop.com/pict.jpg

Ahora debe tener una idea acerca de mi problema. Aquí es una versión simplificada de marcado que estoy usando (omití contenido más irrelevante):

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

y estilos CSS ir así:

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

Obviamente he dejado fuera todos los estilos como irreevant fronteras, colores e imágenes de fondo, tamaños de letra, etc. He guardado solamente cosas importantes.

¿Alguna idea de dónde podría ser el problema?

Answer 1

Ver si padding-top: 10px funciona. Es posible que el margen intente ir desde la parte superior de la página.

Answer 2

Intente cerrar su división clara.

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

Answer 3

No acabo de entender este enfoque. Puede envolver el <div> s con la clase derecha e izquierda en otro <div> y aplicar overflow: hidden, width: 100% para que los elementos debajo de flotación se muestren correctamente.

Answer 4

enter code here Pruebe usar un contenedor con un ancho con desbordamiento: oculto alrededor de los divs flotantes, y elimine el div eliminado.

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

Y el CSS

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

(lo siento, me fui IE7 en mi máquina de trabajo para las pruebas así que no puedo comprobar)

Answer 5

Creo que esto es un error de IE8. Se relaciona con un elemento hermano de un div flotante izquierdo y derecho. Con o sin div de compensación, el elemento flotante final pierde su margen superior en IE8.

Hemos probado esto, y sólo IE8 se equivoca:

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

también se nos ocurrió con 3 soluciones.

Answer 6

No tengo IE8 conmigo ... pero tratas de agregar clear: tanto al div inferior como al agregar un margen inferior a uno de los floats superiores? Estoy bastante seguro de que obtendría el mismo efecto sin ningún divs extra.

Answer 7

Tengo problemas similares, y las soluciones proporcionadas por Matt Bradley no funcionaron para mí (¡pero gracias por publicarlas de todos modos!). Quería tener margin-top: 10px en un elemento h1.

La solución que se me ocurrió fue agregando posición: relativa, superior: 10px y margen superior: 0px al elemento h1.