espaço vertical extra no IE após div clara

StackOverflow https://stackoverflow.com/questions/473143

  •  19-08-2019
  •  | 
  •  

Pergunta

Eu criei uma grade simples de divs pela esquerda flutuante-los e um div vazio com uma clara no final de cada linha.

Esta multa funciona no Firefox, mas no IE eu recebo espaço vertical extra entre linhas. Tentei aplicar o método "clearfix", mas devo estar fazendo algo errado.

Por que o IE inserir o espaço extra vertical e como posso me livrar dele? 

<!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>
Foi útil?

Solução

IE é um pouco engraçado sobre <div>s vazias - ele gosta de dar-lhes a altura de uma linha de texto

.

Se você alterar .clear a isso, ele vai encolher até 1 pixel: 

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

Coloque uma cor de fundo para ver o que está acontecendo

Outras dicas

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

alterá-lo para 0px obras melhor ..

Sem ele funciona no IE6, mas não IE7, com ele funciona no IE7, mas acrescenta altura no IE6. Não há palavras para descrever o meu ódio contra este navegador.

O height: 0px não funcionou para mim no IE 8. Além disso, eu não queria uma altura de 1px, porque então não haveria uma linha branca 1px em toda a minha div com um fundo cinza, e eu não queria para definir uma cor de fundo especial para cada instância de um class = div "claro". Tentei line-height: 0; e funcionou muito bem no IE8, IE7 e IE6 (eu não me importo com nada mais do que isso) e FF 3.6, há espaço vertical additonal foi adicionado. 

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

Eu tive esse problema com o IE8 e usados ??seguinte 

.clear
{
    clear:both;
    height:0;
    width:0;
    margin:0;
    padding:0;
    line-height:0;
    overflow: hidden;
    font-size:0px;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top