我有一个如下的CSS
ul {
list-style-image:url(images/bulletArrow.gif);
}
ul li {
background: url(images/hr.gif) no-repeat left bottom;
padding: 5px 0 7px 0;
}
但是在IE浏览器中,子弹图片无法正确对齐(在Firefox中没有问题)。 我已经为li设置了背景图像,因此无法将子弹图片作为背景使用。 有什么解决方法吗?
提前感谢。
我有一个如下的CSS
ul {
list-style-image:url(images/bulletArrow.gif);
}
ul li {
background: url(images/hr.gif) no-repeat left bottom;
padding: 5px 0 7px 0;
}
但是在IE浏览器中,子弹图片无法正确对齐(在Firefox中没有问题)。 我已经为li设置了背景图像,因此无法将子弹图片作为背景使用。 有什么解决方法吗?
提前感谢。
这里有一个很好的解释和解决方案:http://css.maxdesign.com.au/listutorial/master.htm
它说使用 list-style-image
会导致不同浏览器中图片的位置不一致。然后它解释了如何使用背景图片来替代实现更好的效果。
我看到你正在移除列表项的左内边距。对于IE浏览器,你需要同样地将左外边距也去掉 - 要么完全去掉(设为零),要么将其设置为小于默认值的某个值。然后你的列表项就会对齐得很好。
非常感谢你们两位。问题在于我已经使用背景作为分割线了。但我会将其更改为边框,然后我会将背景用于项目符号图像。
可以使用类似这样的代码:
ul li {
background: url(images/bulletArrow.gif);
padding: 5px 30px 5px 25px;
list-style: none;
margin: 0;
vertical-align: middle;
background-repeat: no-repeat;
background-position: 180px 8px;
}
这个链接应该会有所帮助。