list-style-image和float同时使用不能正常显示图片的解决方案

浏览：2749 类型：程序语言发布人：管理员发布日期：2015/4/16 15:02:21

本站原先一直有几个兼容性问题没有做好，在部分浏览器里显示效果不太友好，由于没有造成很严重的显示后果，所以一直懒得做兼容性优化。最近闲来无事，先解决第一个问题：在部分浏览器（IE）中list-style-image不能正常显示图片。

没有办法，只能用IE的F12开发者工具采用删减排除法来找到问题的根本原因，最后发现是float的问题。

查找资料解释如下：list-style是display为list-item的元素才能使用，而使用了float属性之后，display的属性值便不再是list-item，而是生成了一个块级框，所以list-style和float同时使用就会造成list-style设置的属性值没有效果。

解决方法很简单，用background:url(../img.png) no-repeat;来代替list-style-image即可，所有浏览器都兼容background元素，可根据页面需要，将background的位置进行调整。

其它相关文章

VBScript DateDiff 函数|日期比较函数

技术分享 Technology