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

將第一個跨度向左浮動，或將第一個跨度向右浮動並從第二個跨度中刪除浮動屬性。