IE中列表之間的空白

我創建了一個垂直導航，它保存在我創建的按鈕中。在IE中的每個按鈕之間存在巨大差距，我無法解決爲什麼因爲所有邊緣都是0！非常困惑，因爲它在Chrome和FF中正常工作。IE中列表之間的空白

#buttons { 
    float: left; 
    padding: 0; 
    margin: 0px 10px 10px 20px; 
} 
#buttons ul { 
    display: inline; 
} 
#buttons ul li { 
    list-style: none; 
    text-decoration: none; 
    margin: 1px 0; 
    clear:both; 
} 
#buttons ul li #quote{ 
    width: 270px; 
    height: 53px; 
    list-style: none; 
    background-image: url('buttons.png'); 
} 

#buttons ul li a:hover #quote{ 
    width: 270px; 
    height: 53px; 
    background-image: url('buttons.png'); 
    background-position: 270px 0px; 
} 
#buttons ul li #sample{ 
    width: 270px; 
    height: 53px; 
    list-style: none; 
    background-image: url('buttons.png'); 
    background-position: 0px 53px; 
} 

#buttons ul li a:hover #sample{ 
    width: 270px; 
    height: 53px; 
    background-image: url('buttons.png'); 
    background-position: 270px 53px; 
} 
#buttons ul li #plan{ 
    width: 270px; 
    height: 53px; 
    list-style: none; 
    background-image: url('buttons.png'); 
    background-position: 0px 106px; 
} 

#buttons ul li a:hover #plan{ 
    width: 270px; 
    height: 53px; 
    background-image: url('buttons.png'); 
    background-position: 270px 106px; 
} 
#buttons ul li #callback{ 
    width: 270px; 
    height: 53px; 
    list-style: none; 
    background-image: url('buttons.png'); 
    background-position: 0px 159px; 
} 

#buttons ul li a:hover #callback{ 
    width: 270px; 
    height: 53px; 
    background-image: url('buttons.png'); 
    background-position: 270px 159px; 
} 

     <div id="buttons"> 
      <ul> 
       <li><a href="#" onClick="openForm()"><div id="quote"></div></a></li> 
       <li><a href="#"><div id="sample"></div></a></li> 
       <li><a href="#"><div id="plan"></div></a></li> 
       <li><a href="#"><div id="callback"></div></a></li> 
      </ul> 
     </div>

來源

2012-10-18 Luke Turnbull

您是否考慮過重置樣式表？ http://meyerweb.com/eric/tools/css/reset/ – LiamB

也是什麼版本的IE？ – LiamB

剛剛嘗試過，它略有幫助，但仍然有很大差距。而IE 9，儘管如果可能的話，我希望它能夠支持IE 7！ –

一些老版本的IE不喜歡<li>標籤之間的空格。

如果您可以訪問HTML，那麼您可以通過幾種方式解決此問題。

無論是評論：

<li>element One</li><!-- 
--><li>element Two</li><!-- 
--><li>element Three</li>...

或者單行列表：

<li>element One</li><li>element Two</li><li>element Three</li>...

或者你可以嘗試添加vertial-align: bottom;所有<li>標籤。

來源

2012-10-18 09:56:46 SpaceBeers

恐怕這一直沒有奏效！這很奇怪，因爲它從來沒有發生過我和我的列表製作經驗，所以我很困惑它爲什麼這樣做。 –

什麼版本的IE？你可以設置一個JSFiddle嗎？ – SpaceBeers

IE中列表之間的空白

回答

相關問題