list-style-image 在IE下设置float浮动后便不再正常显示
来源:互联网 发布:mysql认证考试报名 编辑:程序博客网 时间:2024/06/05 08:52
写在最前:1.IE下由于display的问题;2、建议使用background设置
笔者最近在写页面的时候碰到个比较纠结的问题,在FF下写好的列表测兼容性的时候发现在IE6和chrome下的兼容性都不是很好。后来,再学长的提点下,把list-style-image属性改为了background:url;background-position;padding;达到了预期的效果。
那么,为什么会用list-style-image会造成这样的结果呢,我把列表部分单独拿出来看了,对CSS属性一条条注释掉来看,当我把float属性去掉后,已经可以有图片出来了,至此,问题应该是找到了。
而为什么用了float属性后会造成图片在IE6下显示异常呢,我在网上查阅了相关资料,还是发现了个比较靠谱的说法:
“
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的设置的属性值没有起到效果。
转自:http://zhiwu88.blog.hexun.com/56479838_d.html
”
所以,在写代码的时候,还是比较推荐用文章开头提到的用background:url;background-position;padding;属性来使列表达到相同的效果。至于为什么在FF下用list-style-image可以达到预期效果呢,我只表示FF很强大。
但到目前为止,还是不清楚为什么FF下list-style又能够起到效果,希望有前辈能够指点一二。
- list-style-image 在IE下设置float浮动后便不再正常显示
- IE中子栏目使用float属性后背景不能正常显示原因及解决
- css背景图片在chrome下正常,IE下不显示
- 在IE下换行显示float:right的解决技巧
- 图片在ie下无法正常显示,在firefox或chrome正常显示的原因
- BrushScriptStd字体在IE下无法正常显示问题
- IE下list-style无效的问题
- 解决IE8下,float右浮动不能与前面元素显示在同一行
- 部分IE浏览器下LI设置list-style-type:none依然占位置问题的解决
- 在FirFox下正常而在IE下不显示的问题
- 在 IE 7 菜单不能正常显示
- mp3在ubuntu下修改后显示正常,但回到windows下显示问号。
- ie 8下 background-image设置
- jpg图片在firefox正常显示 在ie不能显示
- jpg图片在firefox正常显示 在ie不能显示
- jpg图片在firefox正常显示 在ie不能显示
- jpg图片在firefox正常显示 在ie不能显示
- IE浏览器下CSS不能在UTF-8页面正常显示的问题
- Leetcode--Add to List 374. Guess Number Higher or Lower
- BZOJ3942&&Usaco2015 Feb[Censoring] KMP算法
- HTML5 <a>中 target="_blank"属性值含义
- 将PKCS12文件转成JKS
- 机器学习精简教程之七——用scikit-learn做特征提取
- list-style-image 在IE下设置float浮动后便不再正常显示
- GDB 调试
- Vim 常用命令
- Python yield 使用浅析
- Flex兼容性写法(转)
- 正则表达式中模式修正符作用详解(i、g、m、s、x、e)
- Android学习笔记之AndroidManifest.xml文件解析(详解)
- 讲真
- 关于“缺省”这个词