链接在 Firefox 下有下划线，但在 Chrome 下没有答案

【问题标题】：Links are underlined under Firefox but not under Chrome链接在 Firefox 下有下划线，但在 Chrome 下没有
【发布时间】：2014-09-19 14:12:34
【问题描述】：

我已经发了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;
}

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

});

【问题讨论】：

这不是文本装饰。您可以看到，当您将鼠标悬停在它上面时，下划线变为红色，看起来与蓝线不同。（我还在四处张望）
代码嵌套了a元素。这在所有 HTML 版本中都是无效的并且非常混乱，我们应该预期浏览器行为的差异（错误恢复）。您应该更正 HTML 标记。并且你应该解释为什么 JavaScript 在这里是相关的，或者如果不相关则删除它。
非常感谢@JukkaK.Korpela 的评论为什么嵌套的a 元素无效？我应该如何使整个背景可点击（并使其转到一个地址）并使其前面的链接也可点击（并指向另一个地址）？

标签： javascript css html text-decorations

【解决方案1】：

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

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

【讨论】：

【解决方案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">

【讨论】：