在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;