今天在論壇裡面看到一篇文章，講的是以前忽略的一個問題。就是當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上看，那裡有詳細的解釋