奇怪的与 IE6 相关的浮动布局错误答案

【问题标题】：Weird IE6-related float layout bug奇怪的与 IE6 相关的浮动布局错误
【发布时间】：2011-05-29 01:46:44
【问题描述】：

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

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

然而，在 IE6 中，发生了 2 件奇怪的事情。首先，在顶部框中（我没有指定非浮动 DIV 的宽度），绿色 DIV 不清晰，但它的宽度确实比浮动 DIV 短。这似乎不对；浮动的 DIV 肯定应该没有流量。绿色 DIV 和浮动 DIV 之间还有一个奇怪的 3 像素间隙。

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

IE7 非常相似，只是它在浮动 DIV 的左侧没有那个奇怪的 3px 间隙。

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

【问题讨论】：

【解决方案1】：

3 pix gap 是 peek a boo bug。在该元素上放置 -3px 边距或显示内联或两者兼而有之。 pie.net 有你所有的答案

【讨论】：

【解决方案2】：

好的，这个问题似乎在这个PositionIsEverything 页面上得到了相当专业的解释。看起来人们只需要使用符合标准的浏览器，如 IE8、Firefox、Opera、Safari 等，如果您想使用浮动布局并让它们看起来正确。

【讨论】：