링크는 Firefox에서는 밑줄이 그어져 있지만 Chrome에서는 그렇지 않습니다

Question

this jsfiddle을 만들었습니다.

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; 
} 

자바 스크립트

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); 

}); 

Answer 1

주위에 감싸고있는 외부 앵커 태그 .footerTable이 원인입니다. 나는 당신의 바이올린을 수정했습니다, http://jsfiddle.net/6zbr64fn/2/, 그리고 이것을 포함하는 것은 테이블 요소를 감싸는 앵커만을 선택합니다.

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

Answer 2

.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">