我在这个网站上看到了几个相关的问题，但它们似乎都是由于选择器问题引起的，但我认为这不是这里的问题。
在我的例子中，Google Chrome 和 Safari 都告诉我所讨论的 a 标签的计算样式有 text-decoration:none。
选择 a 标签并设置 text-decoration:none 没有任何区别，因为它们已经有了 text-decoration:none。
该页面的样式来自几个不同的样式表，其中一个来 self 的博客主题，一个来自 namespaced import。 Materialize 框架和最后一个用户定义的样式表，我将其留空(因此我没有在这篇文章中包含 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>
最佳答案
那里不是文字装饰。这是一个背景图像。 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 属性时，蓝线消失了。
关于css - 即使文本修饰设置为无，链接仍然带有下划线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36785125/