完美兼容 FF 与 IE 的列表写法

前几天朋友一直在搞这个列表的样式与兼容问题，有序列表可能是初学者最烦的问题，做出来总是不哪么顺心，今天我这里发一个我的写法，以下这些在 Firefox IE7 IE6 这三种浏览器下都完美兼容，没有一点差距，可以看一下 CSS 的写法。
重点是 CSS 里面我标注红色哪一段，其实就是 Display:block 这个东西，只要应用好了，就很少出现兼容性的问题。

还有一点很重要，FF 的 UL 与 IE 下的 ul 的 margin 值是不同的，所以，如果你不给 ul 设定 margin 的值的话，哪两个浏览器就会有出入，所以最好的办法就是给 ul 的 margin 写上值就没有问题了。

HTML 代码：

1
2
3
4
5
6
7
8
9
10
11
12

<div>
  <ul>
    <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 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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;
}

演示地址：http://www.wathon.com/opensource/xhtml/liststyle.html