电脑技术学习

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

dn001

网站有几个兼容性问题没有做好,在部分浏览器里显示效果不太友好,由于没有造成很严重的显示后果,所以一直懒得做兼容性优化。最近闲来无事,先解决第一个问题:在部分浏览器(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的位置进行调整。

标签: