ie下li标签中span加float:right不换行问题解决方案

在IE6,IE7下使用标签时,在加入右浮动样式（float:right）后,会换行的bug解决方案:
bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行

   
   
   
   

    
    
    
    
<ul>
    
    
    
    
<li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
    
    
    
    
<li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
    
    
    
    
<li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
    
    
    
    
<li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
    
    
    
    
</ul>
   
   
   
   

产生原因分析： Span本身虽然是内联元素,但加上浮动后它就变成了块级元素了,所以才会自动换行,浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端。 解决方案: 1. span和a标签交换位置.

   
   
   
   

    
    
    
    
<ul>
    
    
    
    
 <li><span>2012</span><a>BEST SUSHI MENU</a></li>
    
    
    
    
</ul>
   
   
   
   

缺点:语义结构发生改变,不合逻辑.
2.
a加左浮动,span加右浮动
3.
使用IE hack 在span标签中加入只有IE6,7可以识别的样式

   
   
   
   

    
    
    
    
*margin-top:20px;
    
    
    
    
_margin-top:20px;
   
   
   
   

说明,使换行的部分根据margin-top再呈现出来.
4.最佳方案

   
   
   
   

    
    
    
    
li{position:relative;}
    
    
    
    
li span{position:absolute ;right:0px;}
   
   
   
   

注：在li标签中使用positon:relative,在li span中使用absolute绝对定位来使span内容重新定位。

 

以上是转自别人的博客的解决方法。但是我试验了上边的方法，上边的方法能解决在IE中的问题，但是在webkit内核的浏览器中浏览又会出现同样的问题。

后来试了一下，发现把第二个方法稍微修改一下，两个都会兼容。

方法是按照上边的第二个方法，但是加完以后在a标签的float前加*，使该样式只能在IE中起作用。

#columnlist li a
{
*float: left;
}