超链接下划线粘连的问题

1、border取代text-decoration
2、通过设置a的padding-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=utf-8" />   
    <title>Untitled Document</title>   
    <style type="text/css">   
      <!--      
      /*这是使用 text-decoration:underline 的状态*/    
      .g-mod-topNav1{ font-family:"宋体"; font-size:12px; width:950px; margin:0 auto; height:30px; overflow:hidden; clear:both; line-height:30px; }    
      .g-mod-topNav1 .c1 a{ margin:0 10px;}    
      .g-mod-topNav1 .c1, .g-mod-topNav1 .c2{ float:left; margin-right:20px;}    
      .g-mod-topNav1{background:#336699; color:#a8bacf;}     
      .g-mod-topNav1 a:link,    
      .g-mod-topNav1 a:visited,    
      .g-mod-topNav1 a:hover{ color:#fff; text-decoration:underline; overflow:hidden;}    

      /*这是使用 border-bottom 的状态*/    
      .g-mod-topNav{ font-family:"宋体"; font-size:12px; width:950px; margin:0 auto; height:30px; overflow:hidden; clear:both; line-height:30px; }    
      .g-mod-topNav .c1 a{ margin:0 10px;}    
      .g-mod-topNav .c1, .g-mod-topNav .c2{ float:left; margin-right:20px;}    
      .g-mod-topNav{background:#336699; color:#a8bacf;}    
      .g-mod-topNav a{padding-bottom:1px;_padding-bottom:0;} /*通过设置 padding-bottom 值来控制下滑线的位置*/    
      .g-mod-topNav a:link,    
      .g-mod-topNav a:visited,    
      .g-mod-topNav a:hover{ color:#fff; text-decoration:none; border-bottom:1px solid #fff;  overflow:hidden;}    
      -->   
    </style>   
  </head>      
  <body>      
    <div class="g-mod-topNav1">   
      <div class="c1"><a href="#">新浪论坛首页</a>&gt;<a href="#">汽车论坛</a>&gt;<a href="#">踏青论坛</a></div>   
      <div class="c2">这是使用 text-decoration:underline 的状态</div>   
    </div>   
    <br />   
    <div class="g-mod-topNav">   
      <div class="c1"><a href="#">新浪论坛首页</a>&gt;<a href="#">汽车论坛</a>&gt;<a href="#">踏青论坛</a></div>   
      <div class="c2">这是使用 border-bottom 的状态</div>   
    </div>    
  </body>   
</html> 

 

示例图如下:

 

你可能感兴趣的:(html,XHTML,css)