2

我的链接在这里:

示例页面

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

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

截屏

我已经修复了这个页面的一些“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 标签一些行高,也设法修复了裁剪。

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

不过,这有点像一个障碍:)

4

2 回答 2

3

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

于 2008-11-03T14:45:45.863 回答
1

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

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

于 2008-11-03T14:49:49.100 回答