Question

我的链接在这里：

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;

}

进一步修改：

通过给标签添加一些行高，来管理修剪裁剪。

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

虽然这有点像一个小屋：）

Answer 1

我知道这不是一个真正的解决方案，但我建议使用背景图片而不是列表式图片。您将获得相同的效果，它将适用于所有浏览器。

Answer 2

以下是关于样式列表的精彩文章：http://www.alistapart.com/articles/taminglists/

它有很多关于不同浏览器如何呈现列表的示例/屏幕截图。它应该回答你所有的问题然后回答一些问题。：）

Answer 3

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

如果您展示了这些元素的CSS，我们可以更快地检查它：）

列表上的IE6项目符号

3 个答案: