经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 关于css reset中list-style:none的一些想法

查看: 2006|回复: 11

[讨论] 关于css reset中list-style:none的一些想法 [复制链接]

4321285　楼主

李寻饭

版主 

帖子: 3412
体力: 6775
威望: 2
居住地: 北京市昌平区

发表于 2010-5-20 10:43:41 |显示全部楼层

原来工作中曾经碰到过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;})

<!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" />
	<meta name="author" content="fanfan,xiangrui09@qq.com" />
	<title>常见的用法</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-right:10px;}
	p span{text-decoration:line-through;}
	ul{width:275px;margin:4px 0 0 15px;background:aqua;}
	ul,li{list-style:none;}
	</style>
	</head>
	<body>
		    <div>
		    <p>1: list-style:none;</p>
		    <ul>
			<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>

提示：您可以先修改部分代码再运行

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

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

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

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

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

<!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" />
	<meta name="author" content="fanfan,xiangrui09@qq.com" />
	<title>奇怪的事情发生了</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-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;}
	</style>
	</head>
	<body>
		    <div>
		    <p>1: 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>
	</body>
	</html>

提示：您可以先修改部分代码再运行

.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再测试了一下

<!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" />
<meta name="author" content="fanfan,xiangrui09@qq.com" />
<title>强制inside</title>
<style type="text/css">
    body,ul,li,p {padding:0;margin:0;font-size:12px;}
    p{font:bold 16px/180% arial;}
    div{background:#eee;margin-right:10px;}
    p span{text-decoration:line-through;}
    ul{width:275px;margin:4px 0 0 15px;background:aqua;list-style:none inside none;}
</style>
</head>
<body>
<div>
    <p>强制inside list-style:none inside none;</p>
    <ul>
        <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>

提示：您可以先修改部分代码再运行

运行后可以发现,在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>

提示：您可以先修改部分代码再运行

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

[ 本帖最后由 4321285 于 2010-5-20 11:10 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

已有 1 人评分	威望	收起理由
yoom	+ 2	辛苦了！总结:都是因为默认的margin,paddin ...

总评分: 威望 + 2 查看全部评分

西部数码云主机4G内存500G仅4980！

使用道具举报

wangjin327　

中级会员 

帖子: 62
体力: 316
威望: 0

发表于 2010-5-20 10:54:19 |显示全部楼层

楼主总结很好，收藏了，我以前还真的没有注意过float和display:inline在一起的时候会有这样的效果，学习了。

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

iifksp　

葵中剑

金牌会员 

帖子: 2639
体力: 3931
威望: 26

发表于 2010-5-20 11:03:53 |显示全部楼层

LZ很细心，在上个帖子解决的问题，就能做这么好的总结。
受用。

BLOG:SwordAir.com

使用道具举报

geminids　

高级会员 

帖子: 268
体力: 780
威望: 0

发表于 2010-5-20 13:03:03 |显示全部楼层

我这看不用有float，只要inline就会出现距离；
以前几乎没在UL上使用过inline，从没遇到过这中情况，学习了！

使用道具举报

SunSeaT　

夕阳西下几时回

高级会员 

帖子: 377
体力: 825
威望: 0

发表于 2010-5-20 13:09:39 |显示全部楼层

支持一下新版主！

西安文明网

使用道具举报

birdstudio　

CSS魔术师

荣誉管理 

帖子: 2452
体力: 5010
威望: 4

发表于 2010-5-20 23:06:32 |显示全部楼层

楼主说得没错，我也遇到过类似的问题。IE6,7 会自作聪明地在某些情况下改变 li 的一些样式。所以 CSS Reset 中确实需要考虑这个问题。

■ 提问请贴图贴代码。　　● 我的微博　　● 我的博客 (已恢复)

使用道具举报

xeonwell　

中级会员

帖子: 126
体力: 422
威望: 1
居住地: 广东省深圳市

发表于 2010-5-21 01:19:46 |显示全部楼层

好文, 准备收藏

SSD

使用道具举报

camper　

半成品

银牌会员 

帖子: 995
体力: 2648
威望: 0
居住地: 江苏省苏州市

发表于 2010-5-24 10:00:47 |显示全部楼层

已更新至我的reset，谢谢楼主。。

http://www.qianduankaifa.com

使用道具举报

z3333426　

探索

金牌会员 

帖子: 8833
体力: 4129
威望: 0

发表于 2010-5-28 09:58:03 |显示全部楼层

还真没注意过这个事情。。。

以后得注意了。。

下班的时候还在装忙，最后发现那个文件还是只读模式。。。

使用道具举报

css8wusan　

雨中无伞

高级会员 

帖子: 229
体力: 703
威望: 0

发表于 2010-5-28 14:42:57 |显示全部楼层

收藏、测试

javascript小白

使用道具举报

AyumiHamasaki　

灵梦捕手

银牌会员 

帖子: 671
体力: 1729
威望: 0
居住地: 浙江省杭州市

发表于 2010-5-28 15:07:56 |显示全部楼层

UL里很少用float:left;display:inline;
所以也没注意到过这个问题
学习了

光阴似箭,日月如梭.

使用道具举报

dengyelin　

初级会员

帖子: 22
体力: 95
威望: 0
居住地: 广西壮族自治区桂林市

发表于 2010-6-4 10:10:54 |显示全部楼层

list-style-position，任何的版本的 IE（包括 IE8）都不支持属性值 "inherit"。

而LZ说：所以我推测在IE6,7中当UL具有float:left和display:inline属性后,设置了list-style:none,则list-style-position也默认为inside了;

使用道具举报

返回列表

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-23 06:03 , Processed in 0.131759 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X2

		自动登录	找回密码
密码			注册

[讨论] 关于css reset中list-style:none的一些想法 [复制链接]

浏览过的帖子

浏览过的版块