IE6 列表中的项目符号

StackOverflow https://stackoverflow.com/questions/258769

  •  06-07-2019
  •  | 
  •  

题

我的链接在这里：

示例页面

我正在使用列表样式图像：给出我的水平列表（非常顶部和底部）分隔符。我有一类 .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;
}

不过，这有点像一个困境:)

有帮助吗？

解决方案

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

其他提示

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

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top