完美相容FF與IE的列表寫法

原帖地址：
http://www.cnblogs.com/huacn/archive/2007/06/29/ul_li_xiefa_jianrong_firefox_ie6_ie7.html

前幾天朋友一直在搞這個列表的樣式與相容問題,有序列表可能是初學者最煩的問題,做出來總是不哪麼順心,今天我這裡發一個我的寫法,以下這些在Firefox IE7 IE6這三種瀏覽器下都完美相容,沒有一點差距,可以看一下CSS的寫法.
重點是CSS裡面我標註紅色哪一段,其實就是Display:block這個東西,只要應用好了,就很少出現相容性的問題.
還有一點很重要,FF的UL與IE下的ul的margin值是不同的,所以,如果你不給ul設定margin的值的話,哪兩個瀏覽器就會有出入,所以最好的辦法就是給ul的margin寫上值就沒有問題了.

HTML代碼:<div  class="item">
    <ul>
        <li><a href="#">iPhone將能與微軟Exchange Server互聯</a></li>
        <li><a href="#">全美各媒體測試報告傾巢出動</a></li>
        <li><a href="#">非美國公民無緣iPhone</a></li>
        <li><a href="#">討論:報紙還能活多久</a></li>
        <li><a href="#">[圖]江民KV系列26日升級後出現系統崩潰問題</a></li>
        <li><a href="#">iPhone將能與微軟Exchange Server互聯</a></li>
        <li><a href="#">iPhone將能與微軟Exchange Server互聯</a></li>
        <li><a href="#">iPhone將能與微軟Exchange Server互聯</a></li>
        <li><a href="#">iPhone將能與微軟Exchange Server互聯</a></li>
    </ul>
</div>

CSS代碼:body{
        background:#EEE;
        text-align:center;
        font-family:宋體, verdana;
        font-size:12px;
    }
    
    .item {
     margin:40px auto;
     background:#FFF;
     border:1px solid #CCC;
     width:250px;
     padding:8px;
     text-align:left;
     
    }
    
    .item ul {
        margin:0;
        padding:0;
        list-style-type:none;    
        border:1px solid #F0F0F0;
    }
    
    .item ul li { margin:0;padding:0;}
    
    .item ul li a:link,.item ul li a:visited {
        width:100%;
        background:#F5F5F5;
        display:block;
        line-height:22px;    
        border-bottom:1px solid #F0F0F0;
        color:blue;
        text-decoration:none;
    }
    
    .item ul li a:actived { }
    
    .item ul li a:hover{
        background:#FFF;
    }