以文本方式查看主题

-  ╋艺 镇╋  (http://wdystv.com/bbs/index.asp)
--  ┣◇网站建设&Web语言  (http://wdystv.com/bbs/list.asp?boardid=4)
----  list-style:none outside none;的作用  (http://wdystv.com/bbs/dispbbs.asp?boardid=4&id=3687)
--  作者：admin
--  发布时间：2012/12/29 17:47:01
--  list-style:none outside none;的作用
今天在论坛里面看到一篇文章，讲的是以前忽略的一个问题。就是当ul里面有float和display：inline，在ie6、ie7里面会有一些问题。一般对ul进行reset也好，或是设置ul的样式时，往往要写list-style-type：none，有时偷懒点写list-style：none。这个在ff、ie8下面显示正常，列表符隐去不见，li里面的内容与框之间没有距离，但是在ie6、ie7里面虽然也会隐去列表符，但是会保留列表符在li里面占得位置。

废话少说直接上代码：

<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>

<div>
<p>1: list-style:none;</p>
<ul class="ul01">
<li><a href="#">aaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
</ul>
</div>
</body>

效果如图：ff下正常显示

ie6、ie7下面的效果

先可以在firebug里面看看list-style包含的属性有哪些：



造成ie6、ie7下面这种效果差别，是因为属性list-style-position：inside是他们的默认值，即使设置了list-style:none。当UL不具有float和display:inline;时，无论有没有list-style:none这个属性,列表符都被隐藏,不占位置。

原文请到http://www.blueidea.com/tech/web/2010/7616.asp上看，那里有详细的解释

http://blog.sina.com.cn/s/blog_818a1e5b0100vjll.html

[此贴子已经被作者于2012-12-29 17:48:54编辑过]