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

有一个具有内部内容的div，div中包含一个div。不知何故，这个div扩展到包含下一个div。它打动了我的想法。这个简单的CSS在IE中有什么问题？

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

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

来源

2008-12-15 Sam

我没有得到你想要得到的效果。尝试描述一下，那么它可能会更容易帮助。特别是第一个孩子div没有什么意义，因为它根本没有造型。 – 2008-12-15 09:28:03

我正在尝试接下来的评论，每个孩子都有一个左边框。出于某种原因，该边界在整个页面中“流血”到所有其他孩子。 – Sam 2008-12-15 09:41:45

通过“下一步”我的意思是“巢” – Sam 2008-12-15 09:42:38

你需要“给布局”的第一个div。你最好做到这一点使用IE6有针对性的样式：

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

... 

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

这是一个已知的IE6的问题与hasLayout的属性。阅读更多关于它 - http://www.satzansatz.de/cssd/onhavinglayout.html

来源

2008-12-15 09:57:50

一个解决方案是在每个地方放置“位置：相对”，但是这打破了我页面中的其他内容。

来源

2008-12-15 09:26:24 Sam

听起来像你在过渡怪癖模式是邪恶。

严格解决这个问题。

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

来源

2008-12-15 09:30:22 annakata

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

来源

2008-12-15 09:31:36

答案是非常简单，因为你嵌套的diverent div的，没有他们有一个高度，所以有一个溢出IE6。这样做：

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

它会工作得很好。

来源

2008-12-15 22:44:05

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

回答

相关问题