IE7 e Firefox 3 renderização diferença

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

Pergunta

Aqui está um resumo de uma página que estou desenvolvendo. 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <link rel="stylesheet" href="../css/test.css" />
    <title>Prosperity Login</title>
  </head>
  <body>
    <div id="banner">
    </div>
    <div id="subbanner">
    </div>
    <div id="body">
      <div id="colA">
      </div>
      <div id="colB">
        <div id="B1">
        </div>
        <div id="B2">
        </div>
      </div>
      <div id="colC">
      </div>
      <div id="colD">
      </div>
    </div>
    <div id="footer">
    </div>
  </body>
</html>

E o CSS: 

* {
  margin: 0px;
  padding: 0px;
}



div {
  border: 1px dotted;
}

#banner {
  height: 70px;
  width: 100%;
}

#subbanner {
  height: 30px;
  width: 100%;
}

#body {
  background-color: #CCFFCC;
  width: 80%;
}

#colA{
  float: left;
  height: 120px;
  width: 24%;
}

#colB{
  float: left;
  height: 80px;
  width: 24%;
}
#colC{
  float: left;
  height: 120px;
  width: 24%;
}
#colD{
  float: left;
  height: 120px;
  width: 24%;
}

#B1{
  float: right;
  height: 48px;
  width: 80%;
}

#B2{
  float: right;
  height: 28px;
  width: 80%;
}
#footer{
  height: 30px;
  width: 100%;
}

No Firefox 3, a div corporal (com um fundo verde) é esmagado a quase nada, enquanto IE7 processa a página perfeitamente. Do que eu posso dizer do padrão CSS 2.1 (via livro O'Reilly de Meyer), divs flutuou deve flutuar dentro de seu bloco de recipiente que não é claramente o caso no Firefox 3.

Então, se a renderização do Firefox é compatível, o que eu estou ausente?

Foi útil?

Solução

Seu problema é que o IE7 limpa o elemento pai para que ele contenha a criança flutuante. Isto não é como ele deve ser processado. Melhores explicações por outros cartazes.

correção simples: aplicar overflow: hidden; ao seu #body: 

#body {
    overflow: hidden;
}

este post para uma explicação.

Outras dicas

Como sempre, quando uma página é processada differntly no Internet Explorer e Firefox, o Firefox processa a página corretamente.

O div corpo não deve ter qualquer altura. Ele só contém elemento flutuante, então não há nada nele que lhe daria qualquer altura. Um elemento flutuante não afeta o tamanho dele pai. IE faz isso wroing e expande o elemento para contê-lo de crianças. Este é um dos bem conhecidos erros de renderização do IE.

Remova a tag xml a partir do código. O doctype tem que vir em primeiro lugar na página ou IE irá ignorá-lo.

Se você visualizar a página no IE 8 beta, ele irá processar a página exatamente como o Firefox faz.

Não há peso ou volume atribuído ao div com id = "body". Qualquer texto colocado dentro da div vai dar-lhe volume e tornar a cor de fundo para o tamanho apropriado. Este problema vai jogar no fora navegadores baseados no WebKit, bem como (Chrome, Safari).

De qualquer lugar texto no div corpo para dar-lhe peso ou adicionar um estilo de overflow: hidden; ao div com id = corpo.

Obrigado a todos por suas respostas.

Não há outra solução que resolve meu problema assim: flutuante div pai (id = "body"). Isto vem direto do livro de Meyer, então eu não sei como eu perdi. Apenas mais um caso de fazer é a aprendizagem! A outra coisa é que este também resolve outro problema que eu não fiz estado: como faço para atender a uma margem entre o corpo e rodapé? Uma vez que em Firefox, limpando o rodapé não permite uma margem para ser usado para dar espaço entre o corpo e rodapé. Flutuando o elemento pai no entanto, faz.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top