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：如果你传递给浏览器的这种行为很可能你会得到的问题。我建议你把你自己的列表图标的结果会更好，更一致。