折腾了半天,没能把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
本文转自 陈小龙哈 51CTO博客,原文链接:http://blog.51cto.com/chenxiaolong/1701954