list-style:none outside none;的作用
2014-08-31 18:35
162 查看
今天在论坛里面看到一篇文章,讲的是以前忽略的一个问题。就是当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上看,那里有详细的解释
废话少说直接上代码:
<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上看,那里有详细的解释
相关文章推荐
- list-style:none与list-style:none outside none 引发的思考。
- css取消无序列表<ul>点用list-style:none;
- list-style:none是什么意思
- list-style-position的inside 与outside的区别
- list-style:none这一css属性只能应用在ul标签中而不能应用在li标签中
- JavaScript 学习笔记(四)…….style.display="none"、……"block"、list-style、href="javascript:……"、…….className
- IE6下list-style:none不起作用
- 2016/4/17 去除 ul ol 前标记 list-style:none list-style-type:none
- WinForm设置FormBorderStyle=none后仍可以使用任务栏左键和右键功能
- FormBorderStyle为None时拖动窗体
- list-style-image无法准确定位通过(li的背景模拟或相对定位)解决
- list-style与list-style-type的区别
- css学习之font与colours(list-style-position)
- dede让channelartlist标签支持currentstyle属性 完美解决
- ul和li里面的list-style
- listview android:cacheColorHint,listSelector属性作用
- style="visibility: hidden;"和style="display:none"分析
- istview android:cacheColorHint,android:listSelector属性作用(转)
- Link 标签 rel=Stylesheet的实际作用
- li的list-style-type属性说明