li在IE中無法正確浮動

我在IE板上有一個非常奇怪的問題（忽略IE6）。li在IE中無法正確浮動

基本上我有一個固定寬度的div列表。該列表包含沒有高度或寬度的li單元格，包含鏈接和樣式化span標籤。 li單元格應該正確地浮動，span標記相對於<a>

右側浮動問題，IE無法處理它。我絕對不知道從哪裏開始。

div#all { 
    width: 800px; 
    margin: 0 auto 0 auto; 
    } 

div#head { 
    width: 800px; 
    margin: 0; 
    } 

ul { 
    width: 800px; 
    list-style: none; 
    margin: 35px 0 10px 0; 
    padding: 0; 
    } 

ul span { 
    float: right; 
    display: block; 
    height: 18px; 
    width: 18px; 
    margin: 0 0 0 6px; 
    } 

li { 
    float: right; 
    margin: 5px 15px; 
    padding: 0 0 4px 0; 
    border-bottom: 2px solid; 
    } 

li a { 
    float: left; 
    } 

    <ul> 
     <li class="ABC"> 
     <a href="ABCD">ABCD</a> 
     <span class="li-ABC"> 
     </li> 
    </ul>

忽略跨度類和李類，他們只是有顏色設置

網站可以被看作here

來源

2011-05-23 Boldor

ie9似乎沒問題， – 2011-05-23 17:05:49

你有HTML錯誤。有幾個列表項可以做到這一點：

   <li class="ArabicWorld"> 
       <a class="menu" href="/Arabic World/Arabic World"> 
        العالم العربي 
       </a> 
       <span class="li-ArabicWorld"> 
       </li>

請注意未關閉的<span>。您爲每個列表項目打開一個新的跨度，但不要關閉它。可能還有其他問題。在歸咎於瀏覽器之前總是validate your HTML。在其他瀏覽器中看起來不錯的原因很可能是因爲它們處理錯誤的方式不同。

來源

2011-05-23 17:07:25

是的，就是這樣。未封閉的跨度幾乎崩潰並燒燬了IE的所有內容。謝謝，有時候我只需要一個額外的眼睛就可以了：D – Boldor 2011-05-23 21:33:54

爲了讓LIs在大多數情況下（如果不是所有的瀏覽器）都能正確對齊，而不需要使用浮動，請嘗試下面的代碼示例。

<ul> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 1</a></li> 
    <li>Text 1</li> 
</ul> 


ul { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
} 
li { 
    display: inline; 
} 
li a { 
    /* Add any styling you want here for your list item links */ 
    display: inline-block; 
}

來源

2014-08-14 11:17:47 llanato

li在IE中無法正確浮動

回答

相關問題