我们在制作页面的时候，li与li之间会有我们并不想要的空隙，如图：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 7 <style type="text/css"> 8 ul{ margin:0; padding:0; list-style:none; width:200px} 9 ul li{ height:30px;height:30px; width:200px; background:#000; text-align:center;} 10 ul li a{ display:block;color:#FFF; } 11 </style> 12 13 </head> 14 15 <body> 16 <ul> 17 <li><a href="#">第1条连接</a></li> 18 <li><a href="#">第1条连接</a></li> 19 <li><a href="#">第1条连接</a></li> 20 <li><a href="#">第1条连接</a></li> 21 <li><a href="#">第1条连接</a></li> 22 <li><a href="#">第1条连接</a></li> 23 24 </ul> 25 </body> 26 </html>
解决方法（一）：
在a标签中加入zoom：1，触发ie hack。这也是我个人认为最好的解决方法：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 7 <style type="text/css"> 8 ul{ margin:0; padding:0; list-style:none; width:200px} 9 ul li{ height:30px;height:30px; width:200px; background:#000; text-align:center;} 10 ul li a{ display:block;color:#FFF; zoom:1 } 11 </style> 12 13 </head> 14 15 <body> 16 <ul> 17 <li><a href="#">第1条连接</a></li> 18 <li><a href="#">第1条连接</a></li> 19 <li><a href="#">第1条连接</a></li> 20 <li><a href="#">第1条连接</a></li> 21 <li><a href="#">第1条连接</a></li> 22 <li><a href="#">第1条连接</a></li> 23 24 </ul> 25 </body> 26 </html>
解决方法（二）：
给a标签设置一个宽度，比如100%:
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 7 <style type="text/css"> 8 ul{ margin:0; padding:0; list-style:none; width:200px} 9 ul li{ height:30px;height:30px; width:200px; background:#000; text-align:center;} 10 ul li a{ display:block;color:#FFF; width:100% } 11 </style> 12 13 </head> 14 15 <body> 16 <ul> 17 <li><a href="#">第1条连接</a></li> 18 <li><a href="#">第1条连接</a></li> 19 <li><a href="#">第1条连接</a></li> 20 <li><a href="#">第1条连接</a></li> 21 <li><a href="#">第1条连接</a></li> 22 <li><a href="#">第1条连接</a></li> 23 24 </ul> 25 </body> 26 </html>
解决方法（三）：
设置li为float：left
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 7 <style type="text/css"> 8 ul{ margin:0; padding:0; list-style:none; width:200px} 9 ul li{ height:30px;height:30px; width:200px; background:#000; text-align:center; float:left } 10 ul li a{ display:block;color:#FFF; } 11 </style> 12 13 </head> 14 15 <body> 16 <ul> 17 <li><a href="#">第1条连接</a></li> 18 <li><a href="#">第1条连接</a></li> 19 <li><a href="#">第1条连接</a></li> 20 <li><a href="#">第1条连接</a></li> 21 <li><a href="#">第1条连接</a></li> 22 <li><a href="#">第1条连接</a></li> 23 24 </ul> 25 </body> 26 </html>