Question

有一个div有内部内容，div有一个div内的边框。不知何故，这个div扩展到包含下一个div。它让我大吃一惊。

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

我想知道这个的原因以及如何解决它。

Answer 1

听起来你正处于EVIL的过渡性怪癖模式中。

严格解决这个问题。

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

Answer 2

一种解决方案是在任何地方放置“position：relative”，但这会破坏我页面中的其他内容。

Answer 3

你在内部div中缺少一个分号。如果省略最后一个分号，我已经看到了一些非常奇怪的行为。

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

不确定您拥有的IE版本，但这适用于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>

Answer 4

您需要为第一个div“布局”。你最好使用IE6目标样式：

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

...

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

这是hasLayout属性的已知IE6问题。在此处阅读更多内容 - http://www.satzansatz.de/cssd/onhavinglayout.html

Answer 5

答案很容易，因为你嵌套了不同的div，而且没有一个有高度，所以IE6有一个溢出。这样做：

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

它会正常工作。

IE中这个简单的CSS有什么问题？

5 个答案: