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>
