html - WebKit 浏览器中的不同列表样式类型图像填充

Question

我正在尝试将 css list-style-type 图像与父级的边框对齐。

不幸的是，即使在非常老的 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:如果您将此行为转发给浏览器，您可能会遇到问题。我建议您放置自己的列表图标，结果会更好且更一致。