奇怪的IE6相關的浮動佈局錯誤

Question

我認爲這可能會成爲'標準'IE6佈局錯誤之一，但經過一番搜索後，我看不到明顯的解決方案。這裏是我的測試案例：

http://game-point.net/misc/ie6Test/

我希望它看起來的方式是它的外觀在Firefox3的，Safari瀏覽器，Opera和IE8。紅色的長方形與綠色的長方形重疊在右上方。

然而，在IE6中發生了兩件奇怪的事情。首先，在頂部框中（我沒有指定未懸浮的DIV的寬度），綠色的DIV沒有清除，但是它的寬度沒有達到漂浮的DIV。這看起來不正確;浮動的DIV肯定會流失。綠色DIV和漂浮的DIV之間還有一個奇怪的3像素間隙。

在第二個框中，我指定未展開的DIV的寬度，即使未設置「清除」CSS屬性，未展開的DIV也會清除已浮動的DIV。他們當然不應該清楚。

IE7非常相似，除了它沒有浮動DIV左邊那個好奇的3px間隙。

1）這是我濫用CSS不知何故，我做錯了什麼？ 2）如果這是一個IE6/IE7的錯誤，是否是衆所周知的，是否有解決方法？

Answer 1

好的，這個問題似乎在這個PositionIsEverything頁面上相當熟練地解釋。看起來人們只需要使用像IE8，Firefox，Opera，Safari等符合標準的瀏覽器，如果你想使用浮動佈局並讓它們看起來正確。

Answer 2

3像素差距是窺視一個噓聲的bug。或者在該元素上放置一個-3px的邊距，或者在內嵌或兩者之間顯示。 pie.net有你的全部答案