Internet Explorer < 8 的图像浮动问题答案

【问题标题】：Image float problems with Internet Explorer < 8Internet Explorer < 8 的图像浮动问题
【发布时间】：2011-08-03 00:29:30
【问题描述】：

我注意到“float”css 属性和 Internet Explorer 6 和 7 存在一个非常烦人的问题。

我有一个带有 2 个简单图像的 html：

<img src="aa.jpg">
<img src="bb.jpg" class="alignright">

这是（非常简单的）CSS：

.alignright { float: right;}

使用资源管理器的第一张图片（没有任何浮动属性）： http://img5.imageshack.us/img5/2505/schermata4t.png

有没有办法用 CSS 解决这个问题？

【问题讨论】：

标签： css css-float image

【解决方案1】：

首先将要浮动的东西放在容器的右侧（例如，将“bb.jpg”图像放在“aa.jpg”之前）

【讨论】：

【解决方案2】：

我认为这更多地与您没有将第一张图片浮动到左侧这一事实有关。

查看http://jsfiddle.net/biznuge/KUnNn/3/了解详情。

对我来说，这似乎也发生在 FF 中，而不是像您建议的那样仅发生在

【讨论】：

【解决方案3】：

对于 IE7 / IE6，您必须...

向左浮动第一张图片
将第二张图片向右（或向左）浮动
将“clear:both”添加到以下文本块（如果您希望它出现在图像之后）

http://jsfiddle.net/Kyq5u/

我使用 span 来模拟图像。

CSS...


.img-a {
    background-color: red;
    padding: 100px;
    float: left;
}
.img-b {
    background-color: blue;
    padding: 100px;
    float: right;
}
p {
    clear: both;
}

HTML...

<span class="img-a"></span>
<span class="img-b"></span>

<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu  dolor et arcu dapibus cursus.
</p>

【讨论】：