链接在Firefox下加下划线，但不在Chrome下

我制作了this jsfiddle。链接在Firefox下加下划线，但不在Chrome下

它可以在Chrome浏览器中按预期工作，但是在Firefox下，它会在链接下添加下划线，而我在CSS中为每个链接明确指定text-decoration: none。

这是从小提琴的代码：我包括它下面还有http://jsfiddle.net/6zbr64fn/

：

HTML

<div id="footerSlider"> 
    <div class="fade" id="fade0"> 
     <a href="#"> 
      <table class="footerTable"> 
       <tr> 
        <td> 
         <a href="#"> 
          <img class="footerImage" src="http://i.imgur.com/xr54kxd.png"> 
         </a> 
        </td> 
        <td> 
         <span class="footerText"> 
          <a href="#">Something clever</a> 
          <br> 
          <div class="footerSublinks"> 
           <a class="footerSublink" href="#">CHOICE 1</a> <span class="split">|</span> <a class="footerSublink" href="#">CHOICE 2</a> <span class="split">|</span> <a class="footerSublink" href="#">CHOICE 3</a> 
          </div> 
         </span> 
        </td> 
       </tr> 
      </table> 
     </a> 
    </div> 
    <div class="fade" id="fade1"> 
     <a href="#"> 
      <table class="footerTable"> 
       <tr> 
        <td> 
         <a href="#"> 
          <img class="footerImage" src="http://i.imgur.com/du8oCqW.png"> 
         </a> 
        </td> 
        <td> 
         <span class="footerText"> 
          <a href="#">A very nice island</a> 
          <br> 
          <div class="footerSublinks"> 
           <a class="footerSublink" href="#">CHOICE 4</a> <span class="split">|</span> <a class="footerSublink" href="#">CHOICE 5</a> <span class="split">|</span> <a class="footerSublink" href="#">CHOICE 6</a> 
          </div> 
         </span> 
        </td> 
       </tr> 
      </table> 
     </a> 
    </div> 
</div>

CSS

#footerSlider { 
    width: 986px; 
    height: 168px; 
    border: 1px solid; 
    border-radius: 5px; 
    background-color: #e9e9e9; 
} 

.fade { 
    height: 137px; 
} 

.footerImage { 
    float: left; 
    margin-left:20px; 
    vertical-align:middle; 
} 

.footerText { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    height: 137px; 
} 

.footerText > a { 
    text-decoration: none; 
    color: #58595b; 
    font-size: 1.8em; 
} 

.footerText:before { 
    content: ""; 
    width: 29px; 
    height: 26px; 
    position: absolute; 
    margin: 8px 0 0 -20px; 
    background-repeat: no-repeat; 
    background-image: url(http://i.imgur.com/RpRclne.png); 
} 

.footerSublinks a { 
    text-decoration: none; 
    line-height: 50px; 
    font-size: 1.7em; 
    color: #292564; 
    transition: color 0.8s ease; 
} 

.footerSublinks a:hover { 
    text-decoration: underline; 
    color: #F00; 
} 

.split { 
    font-size: 2em; 
    font-weight: bold; 
    line-height: 50px; 
    margin-bottom: 4px; 
    color: #292564; 
} 

.footerTable { 
    text-align: center; 
    border: 5px; 
    width: 100%; 
    margin: 10px; 
}

的Javascript

var loopInterval = 5000; 

$(document).ready(function(){ 
    allFades = $(".fade"); 

    var fadesLength = allFades.length; 
    var nextIndex = 0; 

    fadesHtml = []; 

    allFades.each(function(index){ 
     fadesHtml.push($(this).html()); 
     if(index!=0){ 
      $(this).remove(); 
     } 
    }); 

    function loopFade(){ 
     $("#fade0").fadeOut(500, function(){ 
      nextIndex++; 
      if(nextIndex>(fadesLength-1)){ 
       nextIndex=0; 
      } 
      $("#fade0").html(fadesHtml[nextIndex]).fadeIn(500); 
     }); 
    } 

    setInterval(loopFade, loopInterval); 

});

来源

2014-09-19 hakermania

它不是文字修饰。您可以看到，当您将鼠标悬停在其上时，下划线会变成红色，看起来与蓝线不同。（我仍在环顾四周） – KnightHawk 2014-09-19 14:31:05

代码嵌套了'a'元素。这在所有的HTML版本中都是无效的，并且非常混乱，我们应该*期望*浏览器行为的差异（错误恢复）。您应该更正HTML标记。你应该解释为什么JavaScript在这里是相关的，或者如果不是这样的话就把它移除。 – 2014-09-19 15:34:13

非常感谢评论@ JukkaK.Korpela为什么嵌套'a'元素无效？我应该怎么做整个背景点击（并使它到一个地址），并使其前面的链接可点击（并指向另一个地址）？ – hakermania 2014-09-19 16:24:58

包裹在.footerTable中的外锚标记导致了这种情况。我修改了你的小提琴，http://jsfiddle.net/6zbr64fn/2/，并且包含了这个只选择你包装表格元素的锚点。

.fade > a { 
    text-decoration: none; 
}

来源

2014-09-19 14:35:55

您尚未在.fade div下正确设置或寻址实际锚标记。

您可以轻松地做重写的行为：

a { 
    text-decoration: none; 
}

但是这将是一个非常强烈的声明，专一，聪明（更多关于这个问题：here），所以我会亲自推荐给一个类名到您想要阻止默认行为的链接，并且这样做。

例如，使用类.no-underline，并把它应用下面的CSS：

.no-underline { 
    text-decoration: none; 
}

而且在你的标记：

<div id="footerSlider"> 
<div class="fade" id="fade0"> 
    <a href="#" class="no-underline"> 
     <table class="footerTable">

来源

2014-09-19 14:41:50

链接在Firefox下加下划线，但不在Chrome下

回答

相关问题