IE7浮动错误解决方法？

Question

我有以下 HTML：

<div><span>left</span><span style="float:right;">right</span></div>

由于某种原因，float:right 向右浮动，但也下降了 1 行。 为什么会发生这种情况，是否有解决方法？

这是一个 jsfiddle 来展示它的实际效果： http://jsfiddle.net/CxaW6/

但它只会在您通过 IE7 查看链接时显示错误。

Answer 1

让另一个跨度向左浮动将解决此问题。

<div><span style="float:left;">left</span><span style="float:right;">right</span></div>

通常span被视为内联元素。 IE7 似乎以不同的方式处理它们，因此将第一个跨度的宽度（在布局过程中）扩展到 100%。 在这种情况下，这一行中的另一个跨度没有足够的空间，因此它将被换行到下一行。

Answer 2

您可以使用float: left （我的首选解决方案）显式地将跨度向左浮动，也可以将右浮动跨度放在标记中的首位。 问题与 IE7 为第一个跨度提供虚拟全宽有关，导致第二个跨度呈现在“下一个”行上。

Answer 3

将第一个跨度向左浮动，或将第一个跨度向右浮动并从第二个跨度中删除浮动属性。