在IE下換行顯示float:right的解決技巧

今天在做一個簡單的網站，其中用到顯示文章列表

 

要求很簡單，左邊顯示標題，右邊顯示日期

 

代碼如下

 

<li><span class="title"><a href="#" mce_href="#">計算機學院：務實創新，亮點突出，再創佳績</a></span><span class="time">2011-05-10</span></li>

 

其中，class=time下設置了float: right;其他就沒有改變了

 

很簡單，在chrome和FF上顯示都OK，萬惡的IE下卻換行，顯示不正常

 

於是google一下，類似的問題還不少，找到了錯誤原因：

 

“IE的BUG：當非float的元素和float的元素在一起的時候，如果非float元素在先，那麼float的元素將被排斥也就是說，你的span是float:right，但是你的a還是float:none ”

 

解決辦法有兩個，效果不大一樣，看哪個適合可以選擇用

 

1.將class爲time的span提前，代碼如下：

 

<li><span class="time">2011-05-10</span><span class="title"><a href="#" mce_href="#">計算機學院：務實創新，亮點突出，再創佳績</a></span></li> 

 

2.將class爲title的span設置爲float:left;