css - 奇怪的 IE6 相关 float 布局错误

Question

我认为这可能是“标准”IE6 布局错误之一，但经过一番搜索后，我找不到明显的解决方案。这是我的测试用例:

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

我希望它的外观是它在 Firefox3、Safari、Opera 和 IE8 中的外观。红色矩形在右上角与绿色矩形重叠。

然而，在 IE6 中，发生了两件奇怪的事情。首先，在顶部的框中(我没有指定未 float 的 DIV 的宽度)，绿色的 DIV 不清晰，但它的宽度确实比 float 的 DIV 短。这似乎不对； float 的 DIV 肯定会流出。绿色 DIV 和 float DIV 之间也有一个奇怪的 3 像素间隙。

在第二个框中，我指定了非 float DIV 的宽度，非 float DIV 清除了 float DIV，即使我没有设置“清除”CSS 属性。当然，他们根本不应该清除。

IE7 非常相似，除了它在 float DIV 的左侧没有那个奇怪的 3px 间隙。

1) 这是我以某种方式滥用 CSS，我做错了什么？2) 如果这是一个 IE6/IE7 错误，它是否众所周知，是否有解决方法？

Answer 1

3 pix 差距是偷看一个 boo bug。要么在该元素上放置 -3px 边距，要么显示内联，要么两者兼而有之。pie.net 有你所有的答案