html - UL list-style-image 提供不需要的填充

Question

我有一个类似于以下内容的列表:

<ol>
    <li class="node">1</li>
    <li class="node">2</li>
    <li class="node">3</li>
    <li class="node">4</li>
    <li class="node_end">5</li>
</ol>

我正在使用图像替换 CSS 中的默认元素符号点。单独的图像用于结束节点，另一个图像用于所有其他要点。图像显示，但是一旦我添加这些图像，就会以某种方式将 4 像素填充添加到每个列表项的顶部和底部。这个额外的间距将高度从 26 像素高更改为 34 像素高。这个间隙在不同的要点图像之间提供了大约 8 像素的间隔，根据我的设计，这些图像本应具有 0 像素的间隔。

我制作的 CSS:

li {
    margin: 0;
    padding: 0;
    border: 0;
}
li.node {
    list-style-image: url('../imgs/nodes/udr.png');
}
li.node_end {
    list-style-image: url('../imgs/nodes/ur.png');
}

有什么办法可以去掉这个间距吗？我已经尝试删除与所有 li 相关的所有填充/间距/边框，但到目前为止没有。

编辑:

我认为我的问题不够清楚，所以我在我这边张贴了它的样子。

您在上图中看到的连接条应该是连接的(就像一个连续的图像)。删除元素符号的特殊 CSS 图像会将每个元素的高度降低到 CSS 元素符号图像的高度(正如我使用 Google Chrome 的元素检查工具测试的那样)。

编辑 2:

可以在此处找到一个显示我的问题的示例:http://jsfiddle.net/EyVRF/1/

Answer 1

Garry Cairns 可能有所作为。我测试了您的代码并从一个大小合适的网站借用了一个列表样式图像，我发现没有填充会成为问题，或者至少不是您所看到的类型。

http://jsfiddle.net/BYQQV/

list-style-image: url('http://www.globalindustrial.com/site/img/bullet_homecat.gif');

您可能还想考虑不必为最后一个列表项创建一个全新的类。试试看

li:last-child { list-style-image:.... }

尽管 IE 对此并不满意。但供将来引用。