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：如果你转发到浏览器这种行为可能你会遇到问题。我建议您使用自己的列表图标，结果会更好，更一致。