IE6,7下li标签的间隙

1.在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生3px的间隙。
解决办法:

　　1.给li加浮动

　　2.给li加vertical-align:top;

eg：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 .list{ width:300px;margin:0;padding:0;}
 8 .list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; /* vertical-align:top; */}
 9 .list a{float:left;}
10 .list span{float:right;}
11 /*
12     IE6，7下li的间隙
13     
14     在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙
15     
16     解决办法: 1.给li加浮动
17         2.给li加vertical-align:top;
18 */
19 </style>
20 </head>
21 <body>
22 <ul class="list">
23     <li>
24         <a href="#">文字文字文字文字文字</a>
25         <span>作者</span>
26     </li>
27     <li>
28         <a href="#">文字文字文字文字文字</a>
29         <span>作者</span>
30     </li>
31     <li>
32         <a href="#">文字文字文字文字文字</a>
33         <span>作者</span>
34     </li>
35     <li>
36         <a href="#">文字文字文字文字文字</a>
37         <span>作者</span>
38     </li>
39 </ul>
40 </body>
41 </html>

2.vertical-align属性垂直对其方式

1.可以设置行内元素的对其方式

eg：注意（span1，span2都使用vertical-align）

 1 <style>
 2 .box{height:200px;border:2px solid #000; text-align:center;}
 3 .span1{ width:100px;height:200px;background:Red; display:inline-block; vertical-align:middle;}
 4 .span2{ width:200px;height:100px;background:blue; display:inline-block; vertical-align:middle;}
 5 </style>
 6 </head>
 7 <body>
 8 <div class="box">
 9     <span class="span1"></span>
10     <span class="span2"></span>
11 </div>
12 </body>

2.可是清除图片下的空隙

eg：

 1 <style>
 2 .box{border:10px solid #000;background:red;}
 3 img{ /*vertical-align:top;*/}
 4 </style>
 5 </head>
 6 <body>
 7 <div class="box">
 8     <img src="img/pic.jpg" /><img src="img/pic.jpg" /><img src="img/pic.jpg" />
 9 </div>
10 </body>