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

时间:2008-12-15 09:24:29

标签: css internet-explorer border margin

有一个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>

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

5 个答案:

答案 0 :(得分:2)

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

严格解决这个问题。

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

答案 1 :(得分:0)

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

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

...

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

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

答案 2 :(得分:0)

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

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

它会正常工作。

答案 3 :(得分:0)

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

答案 4 :(得分:0)

你在内部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>