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

本文转自  陈小龙哈   51CTO博客,原文链接:http://blog.51cto.com/chenxiaolong/1701954


上一篇:从数据中心数据存储采购所引发的思考


下一篇:Flex4之与后台服务器通信方式:URLRequest+URLLoader【JAVA方式】