奇怪的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有你的全部答案