li子元素浮动，li不浮动,如下情景
ul>li*3>a[href="#" style="float:left"]
，在IE6/7下li会向下产生大约2px的外边距。
解决方法：li{vertical-align:top/bottom;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>li 间距</title> <style type="text/css"> ul,li{list-style:none; padding:0; margin:0; border:1px solid red;} li{height:30px;} li a{float:left;} </style> </head> <body> <ul> <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li> <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li> <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li> <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li> <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li> </ul> <ul style="vertical-align:bottom;"> <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li> <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li> <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li> <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li> <li><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a><a href="">li 间距</a></li> </ul> </body> </html>
http://www.zhoubo.name/2012/12/17/ie6-ie7-li-margin/