list-style-image 在IE下设置float浮动后便不再正常显示

写在最前：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又能够起到效果，希望有前辈能够指点一二。