list-style-image 设置li不起作用问题

折腾了半天，没能把list-style-image的作用表现出来

到底是谁把它的效果抹去了呢，官方不是说所有浏览器都支持 list-style-image 属性的吗

只能使用删减法来揪出这个元凶

没想到竟然是起到布局作用的float属性

再来详细看看官方给list-style和float属性的说明

list-style:

由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。

float:

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

总结得出的是，list-style的定义是display为list-item 的元素才能使用的，而使用了float属性之后，display默认属性值不再是list-item ，所以使用了list-style后又使用float就会造成list-style的设置的属性值没有起到效果。

由此可见，在IE6与IE7，是没法容忍它们俩相存的。也就是说使用它俩组合设计得到的理想效果在IE的一些版本不能实现，但是这个效果是非常重要的，且IE的使用群体占据了绝大部分。那么另外一种替代的方法就该出现了...

那就是background属性...

举个例子：

li {
list-style: inside url(../img/list1.png);
float:left;
}

可以替换为

li {
background:url(../img/list1.png) no-repeat;
float:left;
}

这样所以浏览器都可以显示效果了！

文章转载：http://zhiwu88.blog.hexun.com/56479838_d.html