如何正确地与列表样式图像建立跨浏览器兼容列表？

Question

我需要做这样的设计，

为了使这成为可能，我使用虚线作为li和+ icon的背景作为列表样式图像。但它在所有浏览器中看起来都不一样。

<ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
   <li class="last">item 5</li>
</ul>

IE7和6它看起来像这样

Answer 1

这对我有用：

li{list-style-image: url(/images/list.png);_list-style-image: url(/images/list2.png);}

其中list1是原始的12x12（px），list2 20x15（px）透明并位于左下角。现在我在所有gekos和ie中得到了相同的视图。 =）

你必须测试第二张图片的大小，因为尺寸会根据很多东西而变化。

Answer 2

您是否尝试在LI上专门为IE6和7设置line-height（或上下填充值）以垂直居中[+]图标？
css重置应修复缩进 - 如果它不只是使用text-indent（或左边缘或左边的填充）。

您可以使用*+html li {}定位IE7，* html li {}定位IE6。

Answer 3

只需使用背景图片，而不是 list-style-image 。不过，这样做的缺点是第二行和任何后续行都将被填充。

li {
    list-style: none;
    background: url(path-to-image) no-repeat left center;
}

Answer 4

您应该编辑图像，使其成为一个li的高度，并且它具有（透明）填充作为图像的一部分。似乎不可能（或非常难）控制图像跨浏览器的位置。