ie下li標籤中span加float:right不換行問題解決方案

在IE6,IE7下使用標籤時,在加入右浮動樣式（float:right）後,會換行的bug解決方案:
bug案例:新聞列表中,爲使時間右對齊,加右浮動產生換行

1. <ul>
2. <li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
3. <li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
4. <li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
5. <li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>
6. </ul>

產生原因分析： Span本身雖然是內聯元素,但加上浮動後它就變成了塊級元素了,所以纔會自動換行,浮動元素的頂端不能高於先於它出現的浮動元素或段落的頂端。 解決方案: 1. span和a標籤交換位置.

1. <ul>
2. <li><span>2012</span><a>BEST SUSHI MENU</a></li>
3. </ul>

缺點:語義結構發生改變,不合邏輯.
2.
a加左浮動,span加右浮動
3.
使用IE hack 在span標籤中加入只有IE6,7可以識別的樣式

1. *margin-top:20px;
2. _margin-top:20px;

說明,使換行的部分根據margin-top再呈現出來.
4.最佳方案

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

注：在li標籤中使用positon:relative,在li span中使用absolute絕對定位來使span內容重新定位。

 

以上是轉自別人的博客的解決方法。但是我試驗了上邊的方法，上邊的方法能解決在IE中的問題，但是在webkit內核的瀏覽器中瀏覽又會出現同樣的問題。

後來試了一下，發現把第二個方法稍微修改一下，兩個都會兼容。

方法是按照上邊的第二個方法，但是加完以後在a標籤的float前加*，使該樣式只能在IE中起作用。

#columnlist li a
{
*float: left;
}