O que está errado com este simples CSS no IE?

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

Pergunta

Há uma div que tem conteúdo interior, uma div com uma borda que está dentro de uma div. De alguma forma, este div é expandida para abranger a próxima div. Ele sopra minha mente. 

<div style="background: yellow;">
  <div>
    <div style="border: 1px solid black; background: green">green background</div>
  </div>
</div>
<div style="margin-top: 100px;">
  IE gives me a yellow background, unless i take away the border of the green 
  background div.
</div>

Eu estou querendo saber a causa disso e como resolvê-lo.

Foi útil?

Solução

Você precisa "dar disposição" para a primeira div. É melhor fazer isso usando o IE6 alvejado estilos: 

<style>
   * html .haslayout {
       display:inline-block;
   }
</style>

...

<div style="background: yellow;" class="haslayout">

Esta é uma questão IE6 conhecido com o atributo hasLayout. Leia mais sobre ele aqui - http://www.satzansatz.de/cssd/onhavinglayout.html

Outras dicas

Parece que você está em quirksmode de transição que é mau.

resolve estritas isso. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Uma solução é colocar "position: relative" em todos os lugares, mas isso quebra outras coisas na minha página

.

Está faltando um ponto e vírgula no div interior. Eu vi um comportamento muito estranho se o último ponto e vírgula é omitida. 

<div style="border: 1px solid black; background: green;">green background</div>

Não tenho certeza qual versão do IE você tem, mas isso funciona no IE7 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Test</title>
  </head>  
  <body>
    <div style="background: yellow;">
     <div>
        <div style="border: 1px solid black; background: green;">green background</div>
      </div>
    </div>
    <div style="margin-top: 100px;">
      IE gives me a yellow background, unless i take away the border of the green 
      background div.
    </div>
  </body>
</html>

A resposta é verry fácil, porque você nidificação diferentes divs, e ninguém fora deles tem uma altura, para que haja um estouro para o IE6. faça o seguinte: 

<div style="background: yellow;height: 1%;">

e vai funcionar muito bem.

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