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
到底是谁把它的效果抹去了呢,官方不是说所有浏览器都支持 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
相关文章推荐
- 部署网络防火墙
- 图片作为背景,登陆页面相对定位
- svn版本库的拆分及迁移子目录等
- web前端之性能优化
- 安装MVC3后没有dbcontext生成器的解决方案
- 《白帽子讲web安全》第七章 注入攻击 读书笔记(二)
- php数组遍历常用方式
- String.Format格式说明
- 《深入理解Linux网络技术内幕》阅读笔记(二十四)
- Mybatis框架基础学习(三)
- Java基础知识强化之IO流笔记50:IO流练习之 复制多级文件夹的案例
- 【BZOJ1064】【NOI2008】假面舞会
- Javascript获取属性的值以及比较值
- 关联规则之Aprior算法(购物篮分析)
- 第八章、组织的采购职能
- 【单调栈】Bzoj 1012: 最大数maxnumber
- dat文件中如何编写DOS的多行命令
- Java基础知识强化之IO流笔记49:IO流练习之 复制指定目录下指定后缀名的文件并修改名称的案例
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记47 文件系统Demo
- Provisioning Services 7.6 入门到精通系列之十:自动添加向导