espacio vertical extra en IE después de borrar div

He creado una cuadrícula simple de divs al dejarlos flotando y un div vacío con un claro al final de cada fila.espacio vertical extra en IE después de borrar div

Esto funciona bien en Firefox, pero en IE obtengo espacio vertical extra entre las filas. Intenté aplicar el método "clearfix", pero debo estar haciendo algo mal.

¿Por qué IE inserta el espacio vertical extra y cómo puedo deshacerme de él?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style> 
     root { 
      display: block; 
     } 

     body { 
      background: white; 
     } 

     .colorChip { 
      position:relative; 
      float: left; 
      width: 20px; 
      height: 20px; 
      margin: 2px; 
      border-style: solid; 
      border-width: 1px; 
      border-color: black; 
     } 

     .clear { 
      clear: both; 
     } 

     .clearfix { 
      display:inline-block; 
     } 

     .clearfix:after, .container:after { 
      clear:both; 
      content:"."; 
      display:block; 
      height:0; 
      visibility:hidden; 
     } 

     * html .clearfix { 
      height:1%; 
     } 
     .clearfix { 
      display:block; 
     } 

    </style> 
    <!--[if IE]> 
<style type="text/css"> 
    .clearfix { 
    zoom: 1;  /* triggers hasLayout */ 
</style> 
<![endif]--> 

    </head> 

    <body> 
    <div class="colorChip clearfix" style="background: rgb(163,143,88)"></div> 
    <div class="colorChip" style="background: rgb(190,170,113)"></div> 
    <div class="colorChip" style="background: rgb(190,250,113)"></div> 
    <div class="clear"></div> 
    <div class="colorChip clearfix" style="background: rgb(187,170,128)"></div> 
    <div class="colorChip" style="background: rgb(215,197,154)"></div> 
    <div class="colorChip" style="background: rgb(243,225,181)"></div> 
    <div class="clear"></div> 
    <div class="colorChip clearfix" style="background: rgb(104,94,68)"></div> 
    <div class="colorChip" style="background: rgb(129,118,92)"></div> 
    <div class="colorChip" style="background: rgb(155,144,116)"></div> 
    <div class="clear"></div> 
    </body> 
</html>

Fuente

2009-01-23 lajos

IE es un poco divertido acerca vacías <div> s - le gusta darles la altura de una línea de texto.

Si cambia .clear a esto, se va a reducir a 1 píxel:

.clear { 
     clear: both; 
     height: 1px; 
     overflow: hidden; 
    }

Deja un color de fondo para ver lo que está sucediendo

Fuente

2009-01-23 15:14:33 Greg

Greg muchas gracias, que me salvó mucho tiempo. – kobe

.clear { 
    clear: both; 
    height: 0px; 
    overflow: hidden; 
}

Si lo cambia a 0px funciona mejor ..

Fuente

2009-03-17 12:31:21

Sin él funciona en IE6, pero no IE7, con él funciona en IE7, pero agrega altura en IE6. No hay palabras para describir mi odio hacia este navegador.

Fuente

2010-01-28 14:07:41 Polygon

Echa un vistazo aquí también: http://nadirnasir.blogspot.com/2009/04/ie-blank-space-after-img-tag-fix.html

Fuente

2011-03-11 10:21:55

La altura: 0px no funcionó para mí en IE 8. Además, no quería una altura de 1 píxel, porque entonces no habría una línea blanca 1px a través de mi div con un fondo gris, y no quería establecer un color de fondo especial para cada instancia de una clase = div "clara". Intenté línea-altura: 0; y funcionó muy bien en IE8, IE7 e IE6 (no me importa nada más que eso) y FF 3.6, no se agregó espacio vertical adicional.

 
.clear { 
    clear: both; 
    line-height: 0; 
    overflow: hidden; 
}

Fuente

2011-03-17 13:35:55 bmarti44

tenía este problema con IE8 y utilizados siguiendo

.clear 
{ 
    clear:both; 
    height:0; 
    width:0; 
    margin:0; 
    padding:0; 
    line-height:0; 
    overflow: hidden; 
    font-size:0px; 
}

Fuente

2011-05-18 07:57:44

espacio vertical extra en IE después de borrar div

Respuesta

Cuestiones relacionadas