ul在Firefox和IE下的不同表現的解決方案_經驗交流

最近做了個oblog的系統模板，其中涉及到了ul，所以就整理出了這篇文章+這張大圖。
　　ul是一個很常用的標籤，但是因為它在Firefox和IE下的不同表現，讓人覺得它是個很難以控制的標籤。
　　ul在Firefox下有個padding值， 卻沒有margin值；而在IE下正好相反，ul有個margin值， 卻沒有padding值。【中的第二第三例的對照可以看出】
　　在Firefox下，ul的list-style預設是處於內容的外邊緣的。當然可以通過css可以將list-style置為內容的內邊緣。
　　通過權衡得到適合兩個瀏覽器的設定：padding:0; margin:0; list-style:inside;。還可以將ul設定為padding:0; margin:0; list-style:none;，然後給li添加背景圖片，也是很不錯的選擇。
<style type="text/css"> body{font-size:12px; margin:20px; line-height:18px;} #box{width:200px; background-color:#CC9; border:#990 1px solid;} #box ul{padding:0; margin:0; list-style:inside decimal; } </style> <ul> <li>這是第一句話。</li> <li>這是第二句話。</li> <li>這是第三句話。</li> <li>這是第四句話。</li> <li>這是第五句話。</li> </ul>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

