javascript - 链接在 Firefox 下有下划线，但在 Chrome 下没有

Question

我做了this jsfiddle .

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

这是来自 fiddle 的代码: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);

});

Answer 1

您环绕 .footerTable 的外部 anchor 标记导致了此问题。我修改了你的 fiddle ，http://jsfiddle.net/6zbr64fn/2/ , 并包括这个，它只选择你包装表格元素的 anchor 。

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