list

1: list-style:none;

这 个页面在IE6,7,8,FF中都没什么问题.

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

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

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

body,ul,li,p {padding:0;margin:0;font-size:12px;}p{font:bold 16px/180% arial;}div{float:left;display:inline;background:#eee;margin-right:10px;}p span{text-decoration:line-through;}ul{width:275px;margin:4px 0 0 15px;background:aqua;}.ul01{float:left;display:inline;}.ul01,.ul01 li{list-style:none;}

1: list-style:none;

上面的页面在ie8,ff中仍然正常 但是在IE6,7中,ul内侧与li产生了距 离.ancher 认为,当我们定义了list- style:none以后,尽管列表符并不出现,但是在IE6,7中,仍然留有它的位置.看看在FF里这个UL到底拥有哪些属性

图 上可见,当css中定义list-style:none时,对list-style-position 并没有影响,仍然是FF浏览器的默认设置,值为outside而IE6,7中很可能默认list-style-position:inside为 了证实这一点,我把list-style:none 换为list-style:none inside none再测试了一下

强制 inside list-style:none inside none;

运行后可以发现,在IE6,7中,与list- style:none的表现一模一样.所以Ancher推测在IE6,7中当UL具有float:left和 display:inline属性后,设置了list-style:none,则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)

而UL02 在参与测试的各浏览器中表现都比较理想