Question

它可以在Chrome下运行，但在Firefox下，它会在链接下添加下划线，而我在CSS中为每个链接明确指定text-decoration: none。

我也将它包含在下面：

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导致了这个问题。我修改了你的小提琴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">

Firefox下的链接有下划线，但Chrome下没有

2 个答案: