即使 text-decoration 设置为 none，链接仍然带有下划线答案

【问题标题】：Link is still underlined even though text-decoration is set to none即使 text-decoration 设置为 none，链接仍然带有下划线
【发布时间】：2016-04-22 04:55:34
【问题描述】：

我在这个网站上看到了几个相关的问题，但似乎都是由于选择器问题，但我认为这不是这里的问题。
就我而言，Google Chrome 和 Safari 都告诉我，有问题的 a 标签的计算样式有 text-decoration:none。
选择a 标签和设置text-decoration:none 没有区别，因为它们已经有了text-decoration:none。
该页面的样式来自几个不同的样式表，其中一个来自我的博客主题，一个来自 Materialize 框架的 namespaced import，最后一个是我留下 empty 的用户定义样式表（因此我没有t 在这篇文章中包含 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>

【问题讨论】：

标签： css materialize

【解决方案1】：

那里不是文字装饰。这是一个背景图像。 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 属性时，蓝线消失了。

【讨论】：

你比我快 20 秒，@Julia。
和我大约多 10 秒 :P 干得好（或速度好）
最后，一旦我成功地先写了答案：D

【解决方案2】：

好的，也许这会对你有所帮助

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

【讨论】：

【解决方案3】：

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

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

【讨论】：