IE6,7下li标签的间隙

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

　　1.给li加浮动

　　2.给li加vertical-align:top;

eg：

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <style>
 .list{ width:300px;margin:0;padding:0;}
 .list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; /* vertical-align:top; */}
 .list a{float:left;}
 .list span{float:right;}
 /*
     IE6，7下li的间隙

     在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙

     解决办法: 1.给li加浮动
         2.给li加vertical-align:top;
 */
 </style>
 </head>
 <body>
 <ul class="list">
     <li>
         <a href="#">文字文字文字文字文字</a>
         <span>作者</span>
     </li>
     <li>
         <a href="#">文字文字文字文字文字</a>
         <span>作者</span>
     </li>
     <li>
         <a href="#">文字文字文字文字文字</a>
         <span>作者</span>
     </li>
     <li>
         <a href="#">文字文字文字文字文字</a>
         <span>作者</span>
     </li>
 </ul>
 </body>
 </html>

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

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

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

 <style>
 .box{height:200px;border:2px solid #000; text-align:center;}
 .span1{ width:100px;height:200px;background:Red; display:inline-block; vertical-align:middle;}
 .span2{ width:200px;height:100px;background:blue; display:inline-block; vertical-align:middle;}
 </style>
 </head>
 <body>
 <div class="box">
     <span class="span1"></span>
     <span class="span2"></span>
 </div>
 </body>

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

eg：

 <style>
 .box{border:10px solid #000;background:red;}
 img{ /*vertical-align:top;*/}
 </style>
 </head>
 <body>
 <div class="box">
     <img src="img/pic.jpg" /><img src="img/pic.jpg" /><img src="img/pic.jpg" />
 </div>
 </body>