爲什麼我的無序列表不能正確呈現div？

我有一個div中的無序列表與每個列表項的背景圖像。然而，該列表是不正確的Internet Explorer 8，出現爲什麼我的無序列表不能正確呈現div？

Rendered Output http://img694.imageshack.us/img694/7204/screenshotjv.jpg

的問題是有太多的空間，以列表的左側和頂部。以及每個列表項目之間。我希望列表與上面的圖像部分完全齊平，因此左側，頂部或每個項目之間沒有空白。

HTML：

<div id="top"> 
    <div id="topimage"> 
     <center> 
      <img src="image.jpg" alt="image"/> 
     </center> 
    </div> 
    <ul class="list"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</div>

CSS：

#top { 
    width: 255px; 
    float:left; 
    margin:3px; 
} 

#topimage { 
    width: 245px; 
    border:1px solid #bcc5c8; 
    padding:3px; 
} 

.list li { 
    background-image:url(../images/list_sub.jpg); 
    width: 245px; 
    height:23px; 
    list-style:inside; 
    list-style-image:url(../images/listarrow.gif); 
    margin:0px; 
    padding:0px; 
}

我已經試過了margin和padding設置爲零，但沒有奏效。我也檢查過，以確保圖像周圍沒有額外的空間。有什麼建議麼？

來源

2012-05-10 Birds4

這裏有一些事情你可以調整：

包裝你的列表項內容跨度和列表項箭頭適用於跨度改爲將跨度比箭頭稍大的填充左值gif的寬度。
不要使用list-style-image屬性，只需指定list-style：none;得到左對齊X瀏覽器。通常，您應該使用背景圖像屬性來獲取列表項目而不是列表樣式圖像，但由於您也有李的背景圖像，因此您需要額外的跨度。
不要將填充應用於應用寬度和高度的相同元素。他們不會呈現跨瀏覽器。而應在父元素上指定寬度/高度，並在內部包裝元素上指定填充。
通常你應該避免id規則，它們是非常具體的，並導致不可重用的樣式定義。它們使覆蓋樣式定義變得困難。
要使列表項互相接觸，請確保它們上指定的行高等於或小於元素的高度。我認爲list-item-style會解決它，但是請仔細檢查這個設置。

如果這樣不能解決您的問題，請發佈鏈接到背景圖片，我會模擬一個小例子。

來源

2012-05-10 21:19:00

嗨，感謝您的回覆。我用一些重寫的代碼編輯了原文。這還不完美，但是我想要的東西越來越好。我不完全確定如何使用跨度顯示箭頭。我相信還有其他一些可能會更好的事情。我不知道「身份證」的事情。此外，我上傳了背景圖片：http://i47.tinypic.com/30ry04k.jpg – Birds4

對於箭頭，只需將跨度的背景圖像設置爲箭頭圖像即可。如果您指定左中心的背景位置，並添加padding-left：30px;箭頭應該正確排列。身份證實踐不用擔心，現在還不是很普遍。 –

爲什麼我的無序列表不能正確呈現div？

回答

相關問題