解决方法是加上行高line-height

（此例子为静态例子，动态创建的元素的解决方法一样。）

 

  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.     <title></title> 
  5.     <style type="text/css"> 
  6.         .test li a 
  7.         { 
  8.             line-height: 1.5em; /*添加行高*/ 
  9.             color: #2763ad; 
  10.             font-size: 12px; 
  11.             text-decoration: none; 
  12.             border-bottom: 1px solid #2763ad; 
  13.         } 
  14.          
  15.         .test li a:hover 
  16.         { 
  17.             text-decoration: none; 
  18.             border-bottom: none; 
  19.         } 
  20.     </style> 
  21. </head> 
  22. <body> 
  23.     <ul class="test"> 
  24.         <li><a href="#">测试内容</a> </li> 
  25.     </ul> 
  26. </body> 
  27. </html>