浏览器兼容——解析list-style

浏览器兼容——解析list-style

做前端设计的最痛恨的就是IE6的兼容性问题的诡异、怪癖。但是又不得不面对。今天青岛网站建设跟大家讨论一下IE中的重置(reset)标签:list-style:none;的使用。

很多人在开始HTML页面制作之前,都喜欢重置一下某些元素的属性,比如h1,p,ul,ol,li,dl,dt,dd等。并且给li设置list-style:none;本文要讲解的就是在做这些设置的时候需要考虑的另外一些因素。

但是我们不能忽略的是,list-style: 包含了三个属性:

list-style-type
list-style-position
list-style-img

如果不注意这三个属性的话,list-style有时候就会出来捣蛋。

比如当ul,浮动布局后,需要display:inline 来解决在IE6中的双倍边距问题时,奇怪的事情发生了:

当我们定义了list-style:none以后,尽管列表符并不出现,但是在IE6,7中,仍然留有它的位置.
看看在FF里这个UL到底拥有哪些属性

图上可见,当css中定义list-style:none时,对list-style-position 并没有影响,仍然是FF浏览器的默认设置,值为outside
而IE6,7中很可能默认list-style-position:inside
 

所以我得出的总结是
在IE6,7下,当UL不具有float:left;display:inline;时:
无论有没有list-style:none这个属性,列表符都被隐藏,不占位置(下面代码中的5,6)
当UL具有float:left;display:inline;属性时
list-style:none,列表符被隐藏,但是仍然留有位置(list-style-position:inside);(下面代码中的 UL1,ul3)
未设置list-style:none;列表符被隐藏,也不占位(list-style-position:outside)(代码UL4)

最终我想说的就是在css reset的时候使用 list-style:none outside none; 更好,而不要使用list-style:none;