css reset中的list-style:none - 网页制作

　css reset中的list-style:none

作者：4321285　时间： 2010-05-21　文档类型：原创　来自：蓝色理想

原来工作中曾经碰到过UL列表里一些异常的表现,
加上昨天看到了http://bbs.blueidea.com/thread-2984871-1-1.html 这个贴子,所以测试了一下list-style的各种属性,发现了一个有意思的现象

先看一下CSS手册中,对于list-style的解释

定义和用法
list-style 简写属性在一个声明中设置所有的列表属性。

       说明
       该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。
       可以按顺序设置如下属性：
       •list-style-type
       •list-style-position
       •list-style-image
       可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
       默认值： disc outside none

在日常工作中经常需要对ul,li进行css reset ,将列表符号隐藏.
最常用的写法就是Ul,li,ol{list-style:none;}(也有人用ul,li,ol{list-style-type:none;})

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

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

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

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

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

.ul01{float:left;display:inline;}
.ul01,.ul01 li{list-style:none;}

上面的页面在ie8,ff中仍然正常
但是在IE6,7中,ul内侧与li产生了距离.
由此可见,当我们定义了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再测试了一下

运行后可以发现,在IE6,7中,与list-style:none的表现一模一样.
所以我推测在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 在参与测试的各浏览器中表现都比较理想

最后这一段代码对比一下各种情况下list-style的表现,尤其注意4,5,6在IE6,7下的表现

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>list-style:none还是list-style:none outside none;</title> <style type="text/css"> 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:0 10px 10px 0;} p span{text-decoration:line-through;} ul{width:275px;margin:4px 0 0 15px;background:aqua;} .ul01,.ul02,.ul03,.ul04{float:left;display:inline;} .ul01,.ul01 li{list-style:none;} .ul02,.ul02 li{list-style:none outside none;} .ul03,.ul03 li{list-style:none inside none;} .ul04,.ul04 li{} .ul05{} .ul05,.ul05 li{list-style:none;} .ul06{} .ul06,.ul06 li{} </style> </head> <body> <div> <p>1:float:left;display:inline; list-style:none;</p> <ul class="ul01"> <li><a href="#">纯净的文字奇异的梦幻奔腾的思想</a></li> <li><a href="#">就像对爱情一样要求是近乎完美的</a></li> <li><a href="#">校园里淡淡的青春单纯的男孩女孩</a></li> <li><a href="#">我彷徨而又彷徨早已没有了距离之感</a></li> <li><a href="#">凝望着她的脸朗诵起熟悉而又陌生的诗句</a></li> <li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li> <li><a href="#">交错出现明暗线索和不确定的主角</a></li> <li><a href="#">细腻而真挚的感情渐渐突显出来身临其境</a></li> <li><a href="#">高密度的情绪在文字中反复发酵</a></li> </ul> </div> <div> <p>2:float:left;display:inline; list-style:none outside none;</p> <ul class="ul02"> <li><a href="#">纯净的文字奇异的梦幻奔腾的思想</a></li> <li><a href="#">就像对爱情一样要求是近乎完美的</a></li> <li><a href="#">校园里淡淡的青春单纯的男孩女孩</a></li> <li><a href="#">我彷徨而又彷徨早已没有了距离之感</a></li> <li><a href="#">凝望着她的脸朗诵起熟悉而又陌生的诗句</a></li> <li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li> <li><a href="#">交错出现明暗线索和不确定的主角</a></li> <li><a href="#">细腻而真挚的感情渐渐突显出来身临其境</a></li> <li><a href="#">高密度的情绪在文字中反复发酵</a></li> </ul> </div> <div> <p>3: float:left;display:inline;list-style:none inside none;</p> <ul class="ul03"> <li><a href="#">纯净的文字奇异的梦幻奔腾的思想</a></li> <li><a href="#">就像对爱情一样要求是近乎完美的</a></li> <li><a href="#">校园里淡淡的青春单纯的男孩女孩</a></li> <li><a href="#">我彷徨而又彷徨早已没有了距离之感</a></li> <li><a href="#">凝望着她的脸朗诵起熟悉而又陌生的诗句</a></li> <li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li> <li><a href="#">交错出现明暗线索和不确定的主角</a></li> <li><a href="#">细腻而真挚的感情渐渐突显出来身临其境</a></li> <li><a href="#">高密度的情绪在文字中反复发酵</a></li> </ul> </div> <div> <p>4:float:left;display:inline;未做css reset</p> <ul class="ul04"> <li><a href="#">纯净的文字奇异的梦幻奔腾的思想</a></li> <li><a href="#">就像对爱情一样要求是近乎完美的</a></li> <li><a href="#">校园里淡淡的青春单纯的男孩女孩</a></li> <li><a href="#">我彷徨而又彷徨早已没有了距离之感</a></li> <li><a href="#">凝望着她的脸朗诵起熟悉而又陌生的诗句</a></li> <li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li> <li><a href="#">交错出现明暗线索和不确定的主角</a></li> <li><a href="#">细腻而真挚的感情渐渐突显出来身临其境</a></li> <li><a href="#">高密度的情绪在文字中反复发酵</a></li> </ul> </div> <div> <p>5: 无 display,float属性 list-style为none;</p> <ul class="ul05"> <li><a href="#">纯净的文字奇异的梦幻奔腾的思想</a></li> <li><a href="#">就像对爱情一样要求是近乎完美的</a></li> <li><a href="#">校园里淡淡的青春单纯的男孩女孩</a></li> <li><a href="#">我彷徨而又彷徨早已没有了距离之感</a></li> <li><a href="#">凝望着她的脸朗诵起熟悉而又陌生的诗句</a></li> <li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li> <li><a href="#">交错出现明暗线索和不确定的主角</a></li> <li><a href="#">细腻而真挚的感情渐渐突显出来身临其境</a></li> <li><a href="#">高密度的情绪在文字中反复发酵</a></li> </ul> </div> <div> <p>6: 无 display,float属性无list-style:none;</p> <ul class="ul06"> <li><a href="#">纯净的文字奇异的梦幻奔腾的思想</a></li> <li><a href="#">就像对爱情一样要求是近乎完美的</a></li> <li><a href="#">校园里淡淡的青春单纯的男孩女孩</a></li> <li><a href="#">我彷徨而又彷徨早已没有了距离之感</a></li> <li><a href="#">凝望着她的脸朗诵起熟悉而又陌生的诗句</a></li> <li><a href="#">那些文字恰好地描述了一个女孩子的灵</a></li> <li><a href="#">交错出现明暗线索和不确定的主角</a></li> <li><a href="#">细腻而真挚的感情渐渐突显出来身临其境</a></li> <li><a href="#">高密度的情绪在文字中反复发酵</a></li> </ul> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

通过上面代码表现结果的对比,我认为:
在firefox中只要list-style-type为none ,则无论list-stype-position的值为outside或inside , list-style都能很好的被隐藏
而在IE6,7中,仅设置list-style:none,并不足以解决所有问题
所以我认为在css reset的时候使用 list-style:none outside none 更好

经典论坛交流：
http://bbs.blueidea.com/thread-2984999-1-1.html

本文链接：http://www.blueidea.com/tech/web/2010/7616.asp　

出处：蓝色理想
责任编辑：bluehearts

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。

相关文章

更多相关链接

说说CSS Hack 和向后兼容

重构中的模块化设计:样式的作用域

CSS Sprites:有用技术or潜在麻烦

在 Mozilla UI 中书写高效率 CSS

first-letter的一个小妙用


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule