鏈接在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下

回答

相關問題