列表中的 IE6 项目符号答案

【问题标题】：IE6 Bullets on lists列表中的 IE6 项目符号
【发布时间】：2010-09-20 12:02:10
【问题描述】：

我的链接在这里：

Example Page

我正在使用 list-style-image: 给我的水平列表（非常顶部和底部）分隔符。我有一个 .first 类，可以从每个列表的第一个 li 中删除图像。

你瞧，在 IE6 中，它不起作用。发生的情况是没有显示项目符号图像，并且文本的底部几个像素似乎被裁剪了。

Screenshot

我已经修复了这个页面的一些“haslayout”错误，但我感觉这与我的规则层次结构有关，尽管似乎没有多少黑客对我有用。

也许有人可以对此有所了解吗？谢谢。

另外，我的颜色更改适用于悬停，但不是下划线，在同一个选择器中？

编辑好的，我使用了 yoavf 建议的背景图像技术，这似乎可以解决问题，但裁剪问题仍然存在。那么看起来像一个单独的问题......

这是我修改后的 CSS

#site-navigation li {
    background-image:url(../img/site-nav-seperator.gif);
    background-position:0 4px;
    background-repeat:no-repeat;
    float:left;
    padding-left:15px;
}
#site-navigation li.first {
    background-image:none;

}

进一步编辑：

通过给 a 标签一些 line-height 来设法修复裁剪。

#site-navigation a {
    color:#666666;
    display: block;
    text-decoration:none;
    margin-right: 1em;
    line-height: 1.1em;
}

虽然这有点像一个障碍:)

【问题讨论】：

对于我们这些没有 IE6 的人来说，如果您描述 IE6 中发生的事情可能会有所帮助，因为“它不起作用”有些模糊。
抱歉，我更新了帖子并附上了截图。

标签： html css internet-explorer-6

【解决方案1】：

我知道这并不是真正的解决方案，但我建议使用 background-image 而不是 list-style image。您将获得相同的效果，并且适用于所有浏览器。

【讨论】：

【解决方案2】：

看起来站点导航中对象的边距和填充有问题。

如果您展示了这些元素的 CSS，我们可以更快地进行检查 :)

【讨论】：