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/