WebKit瀏覽器中的不同列表樣式類型圖像填充

Question

我試圖將css列表樣式類型的圖像對齊父級邊框。

不幸的是，即使在真正舊的IE瀏覽器，Firefox和Opera中，它也能很好地工作，但在WebKit瀏覽器（Chrome/Safari）中非常混亂。

任何想法是什麼導致它，以及除了使用背景圖像之外的任何變通辦法？這不是reset.css的東西，嘗試了幾次不同的重置，似乎沒有任何解決辦法。

圖片

的jsfiddle

http://jsfiddle.net/zzUdk/

源

HTML

<ul> 
    <li><a href="#">Link Title</a></li> 
    <li><a href="#">Link Title</a></li> 
    <li><a href="#">Link Title</a></li> 
    <li><a href="#">Link Title</a></li> 
    <li><a href="#">Link Title</a></li> 
    <li><a href="#">Link Title</a></li> 
</ul> 

CSS

ul { 
    margin: 2em; 
    border-left: solid 3px #999; 
} 

ul li { 
    position: relative; 
    left: 0.6em; 
    list-style-type: disc; 
} 

（順便說一句，Opera用戶，你可以從複製的jsfiddle代碼？因爲我現在不能好幾周？ :(）

Answer 1

如果你使用：

list-style-position: inside 

你就會把li元素內輪，但究竟在它的開始。然後你可以將它移動到你想要的位置，但我認爲現在沒問題。

http://jsfiddle.net/zzUdk/2/

PS：如果你傳遞給瀏覽器的這種行爲很可能你會得到的問題。我建議你把你自己的列表圖標的結果會更好，更一致。