2014-03-03 60 views
-1

我試圖創建水平列表,其子列表垂直堆疊,即IE 9將「抵消」嵌套UL

A B C1 D E 
     C2 

這裏有MWE小提琴:http://jsfiddle.net/jsx4S/

也要去包括這裏的代碼:

<ul> 
<li><a href="#">A</a></li> 
<li><a href="#">B</a></li> 
<li> 
    <ul> 
     <li><a href="#">C1</a></li> 
     <li><a href="#">C2</a></li> 
    </ul> 
</li> 
<li><a href="#">D</a></li> 
<li><a href="#">E</a></li> 
</ul> 

和相關的CSS:

ul 
{ 
list-style: none; 
display: inline; 
} 

li 
{ 
float: left; 
width: 100px; 
height: 50px; 
margin-right: 25px; 
} 

li a 
{ 
text-decoration: none; 
padding: 4px 20px 4px 4px; 
color: black; 
border: 1px solid; 
} 

Firefox的樣式似乎很好,但在IE9中,瀏覽器爲C1增加了一個(看似)20像素的隨機「偏移量」。我怎樣才能擺脫這個偏移量,所以C1與父列表項內聯?

回答

1

它看起來像有從用戶代理樣式表

我增加了一個額外的規則刪除它在內部UL一些填充,它似乎工作:

li ul 
{ 
    padding: 0 
} 

http://jsfiddle.net/jsx4S/2/

同樣的事情似乎也發生在父母UL上,它顯示在「E」元素上 要修復這個問題,只需從父母UL中刪除填充。

你也可以考慮使用瀏覽器重置,它可以自動重置填充,至少在瀏覽器之間保持一致。

+0

就是這樣 - 謝謝。我實際上使用Bootstrap,所以我很驚訝他們的重置不會照顧到這一點。 –