IE6 浮动 <img>答案

【问题标题】：IE6 float <img>IE6 浮动 <img>
【发布时间】：2010-10-27 04:05:52
【问题描述】：

有时在浮动 div 中。 IE6 不显示标签，但是它会正确地分隔图像，并且当您右键单击图像时，它会提供正确的详细信息，例如大小和文件大小。它只是不显示图像：

<div style="float:left">
    <img src="one.gif" />
</div>
<div style="float:left">
    <img src="two.gif" />
</div>

这些图片在 IE6 中不显示，但在 Firefox/Safari/etc 中显示...有什么解决方法？

【问题讨论】：

【解决方案1】：

一种解决方法是使用：

position: relative;
float: left;

【讨论】：

这可能会导致其他问题。测试它或在下面查看我关于 hasLayout 的答案
+1 这对我有用，没有任何副作用，不像 hasLayout 修复。不过，您应该提到，default position value is static.

【解决方案2】：

它被称为“Peekaboo”错误。欲了解更多信息，请参阅：

解决此问题的首选方法是将容器上的 hasLayout 属性设置为 true

【讨论】：

我们最常（非常有选择地）使用的修复方法是设置 zoom:1。如果使用过于宽松，这也会产生一些不良的副作用。直接设置hasLayout需要开启JavaScript...
我相信他们说要像其他样式一样内联它。例如：
我用来触发hasLayout的方法是给元素1%的高度
您应该提到hasLayout 是 Microsoft 的专有属性，据我所知只能通过 JavaScript 设置。

【解决方案3】：

尝试也浮动图像，这会奏效！

div img {
   float:left;
}

默认情况下，图像为display:inline;，当它们位于浮动 div 中时，div 不会包围它们。我相信这是显示错误的原因。

【讨论】：