Internet Explorer <8图像浮动问题

Question

我注意到了"float“css属性和Internet Explorer6& 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解决这个问题？

Answer 1

首先将你想要漂浮的东西放在容器的右侧(等式‘aa.jpg’之前的'bb.jpg‘图像)

Answer 2

我认为这更多的是因为你没有把你的第一张图片放在左边。

有关这方面的详细信息，请查看http://jsfiddle.net/biznuge/KUnNn/3/。

对于我来说，这似乎也发生在FF中，而不是你建议的

Answer 3

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

• 将第一个图像向左浮动
• 浮动第二个图像向右(或也向左)
• 将"clear:both“添加到以下文本块(如果希望它出现在图像之后)

http://jsfiddle.net/Kyq5u/

我使用spans来模拟图像。

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>