這個簡單的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中有什麼問題？

回答

相關問題