li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             .list{
 8                 margin: 0;
 9                 padding: 0;
10                 list-style: none;
11                 width: 300px;
12             }
13             .list li{
14                 height: 30px;
15                 border: 1px solid red;
16                 line-height: 30px;
17                 *vertical-align: top;
18             }
19             .list li a{
20                 float: left;
21             }
22             .list li span{
23                 float: right;
24             }
25         </style>
26         <!--
27             解决方案：
28                 针对ie6，7添加vertical-align: top;                 *vertical-align: top;
29         -->
30     </head>
31     <body>
32         <ul class="list">
33             <li>
34                 <a href="">左边</a>
35                 <span>右边</span>
36             </li>
37             <li>
38                 <a href="">左边</a>
39                 <span>右边</span>
40             </li>
41             <li>
42                 <a href="">左边</a>
43                 <span>右边</span>
44             </li>
45             <li>
46                 <a href="">左边</a>
47                 <span>右边</span>
48             </li>
49         </ul>
50     </body>
51 </html>