即使将文字修饰设置为无，链接仍然带有下划线

我在此网站上看到了一些相关问题，但所有这些问题似乎都是由于选择器问题引起的，但我不认为这是问题在这里。
就我而言，Google Chrome和Safari都告诉我，a标签的计算样式有text-decoration:none。
选择a标签和设置text-decoration:none没有区别，因为它们已经有text-decoration:none。
页面的样式来自几个不同的样式表，其中一个来自我的博客主题，一个来自Materialize框架的namespaced import，最后一个用户定义的样式表，我离开为空（因此我没有在此包含CSS后）。即使将文字修饰设置为无，链接仍然带有下划线

演示：http://codepen.io/prashcr/pen/RaBKGY

下面是HTML：

<body class="site animated fade-in-down"> 
    <div class="site-wrap center"> 

    <div class="post p2 p-responsive wrap" role="main"> 
     <div class="measure"> 
     <div class="mcss"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col s12 m7"> 
     <div class="card"> 
      <div class="card-image waves-effect waves-block waves-light"> 
      <img class="activator" src="http://materializecss.com/images/office.jpg"> 
      </div> 
      <div class="card-content"> 
      <span class="card-title activator grey-text text-darken-4"> 
       Kanban<i class="material-icons right">more_vert</i> 
      </span> 
      <p><a href="#!">This is a link</a></p> 
      </div> 
      <div class="card-action"> 
      <a href="#">This is a link</a> 
      <a href="#">This is a link</a> 
      </div> 
      <div class="card-reveal"> 
      <span class="card-title grey-text text-darken-4"> 
       Card Title<i class="material-icons right">close</i> 
      </span> 
      <p>Here is some more information about this product that is only revealed once clicked on.</p> 
      </div> 
     </div> 
     </div> 
     <div class="col s12 m5"> 
     <div class="card"> 
      <div class="card-image waves-effect waves-block waves-light"> 
      <img class="activator" src="http://materializecss.com/images/office.jpg"> 
      </div> 
      <div class="card-content"> 
      <span class="card-title activator grey-text text-darken-4"> 
       Camper News<i class="material-icons right">more_vert</i> 
      </span> 
      <p><a href="#!">This is a link</a></p> 
      </div> 
      <div class="card-action"> 
      <a href="#">This is a link</a> 
      <a href="#">This is a link</a> 
      </div> 
      <div class="card-reveal"> 
      <span class="card-title grey-text text-darken-4"> 
       Card Title<i class="material-icons right">close</i> 
      </span> 
      <p>Here is some more information about this product that is only revealed once clicked on.</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

     </div> 
    </div> 
    </div> 
</body>

来源

2016-04-22 Prashanth Chandra

这不是一个文字修饰存在。这是一个背景图像。 Chrome浏览器开发工具显示了这个：

a { 
    color: #0076df; 
    background-image: linear-gradient(to top, transparent 13%, rgba(0, 118, 223, 0.8) 13%, rgba(0, 118, 223, 0.8) 18%, transparent 17%); 
    text-shadow: white 1px 0px 0px, white -1px 0px 0px; 
}

当我禁用开发工具background-image财产，蓝线消失。

来源

2016-04-22 05:02:38 Julia

你打我由像20秒，@Julia。 –

和我约10秒多：P好的工作（或好的速度） –

最后，一旦我成功地写出答案第一：D – Julia

添加background-image: none;到.mcss a

.mcss a { 
    color: #039be5; 
    text-decoration: none; 
    background-image: none; 
}

来源

2016-04-22 05:06:04

好吧，也许这将帮助你

.mcss a:active, .mcss a:hover {background-image: none;} .mcss a {color: #039be5;background-image: none;text-decoration: none;}

来源

2016-04-22 05:12:31

即使将文字修饰设置为无，链接仍然带有下划线

回答

相关问题