IE7浮动bug解决方法？

Question

我有以下HTML：

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

由于某种原因，浮动：向右，向右浮动，但也向下移动1行。为什么会发生这种情况并且有解决方法吗？

这是一个jsfiddle，可以显示它的实际效果：http://jsfiddle.net/CxaW6/

但如果您通过IE7查看链接，它只会显示错误。

Answer 1

让剩下的另一个span浮动将解决此问题。

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

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

Answer 2

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

Answer 3

将第一个范围浮动到左侧，或者将第一个范围浮动到右侧，然后从第二个范围中移除浮动属性。