Was ist falsch mit dieser einfachen CSS im IE?

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

Frage

Es gibt einen div, die inneren Gehalt, ein div mit einer Grenze, die innerhalb eines div ist. Irgendwie ist dieser div die nächste div umfassen erweitert. Es bläst meinen Geist. 

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

Ich frage mich, die Ursache dafür und wie es zu lösen.

War es hilfreich?

Lösung

Sie müssen „geben Layout“ zur ersten div. Sie besser tun dies mit IE6 Arten gezielt: 

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

...

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

Dies ist ein bekanntes Problem mit dem IE6 hasLayout Attribute. Lesen Sie mehr über es hier - http://www.satzansatz.de/cssd/onhavinglayout.html

Andere Tipps

Klingt wie Sie in Übergangs-Quirksmode sind die EVIL ist.

Strikte löst dieses Problem. 

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

Eine Lösung ist „position: relative“ setzen überall, aber das bricht andere Dinge in meiner Seite

.

Sie sind ein Semikolon in der inneren div fehlen. Ich habe einige sehr seltsame Verhalten gesehen, wenn das letzte Semikolon weggelassen wird. 

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

nicht sicher, welche Version von Internet Explorer Sie haben, aber das funktioniert in 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>

Die Antwort ist verry einfach, weil Sie nisten diverent divs, und keiner aus ihnen eine Höhe hat, so gibt es einen Überlauf für den IE6. dies tun: 

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

und es wird gut funktionieren.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top