码迷,mamicode.com
首页 > 其他好文 > 详细

list-style:none outside none;的作用

时间:2015-05-13 12:24:59      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

今天在论坛里面看到一篇文章,讲的是以前忽略的一个问题。就是当ul里面有float和display:inline,在ie6、ie7里面会有一 些问题。一般对ul进行reset也好,或是设置ul的样式时,往往要写list-style-type:none,有时偷懒点写list- style:none。这个在ff、ie8下面显示正常,列表符隐去不见,li里面的内容与框之间没有距离,但是在ie6、ie7里面虽然也会隐去列表 符,但是会保留列表符在li里面占得位置。

   废话少说直接上代码:

  1. <style type="text/css">
  2. body,ul,li,p {padding:0;margin:0;font-size:12px;}
  3. p{font:bold 16px/180% arial;}
  4. div{float:left;display:inline;background:#eee;margin-right:10px;}
  5. p span{text-decoration:line-through;}
  6. ul{width:275px;margin:4px 0 0 15px;background:aqua;}
  7. .ul01{float:left;display:inline;}
  8. .ul01,.ul01 li{list-style:none ;}
  9. </style>
  10. <div>
  11. <p>1: list-style:none;</p>
  12. <ul class="ul01">
  13. <li><a href="#">aaaaaaaaaaaa</a></li>
  14. <li><a href="#">aaaaaaaaaaaaaaaaa</a></li>
  15. <li><a href="#">aaaaaaaaaaaaaaaaaa</a></li>
  16. <li><a href="#">aaaaaaaaaaaaaaaaaaa</a></li>
  17. <li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
  18. <li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
  19. <li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
  20. <li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
  21. <li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
  22. </ul>
  23. </div>
  24. </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 outside none;的作用

标签:

原文地址:http://www.cnblogs.com/cnchenjunbiao/p/4499810.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!