您的位置:首页 > 其它

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

2015-10-11 22:35 381 查看
折腾了半天,没能把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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: