文字装饰：没有不起作用答案

【问题标题】：Text-decoration: none not working文字装饰：没有不起作用
【发布时间】：2012-07-10 07:46:38
【问题描述】：

完全困惑！我尝试用几种不同的方式重写text-decoration: none 行。我还设法通过定位文本来调整文本大小，但 text-decoration: none 代码不会占用。

非常感谢您的帮助。

代码

.widget    
{
     height: 320px;
     width: 220px;
     background-color: #e6e6e6;
     position: relative;                              
     overflow: hidden;                          
}


.title    
{
     font-family: Georgia, Times New Roman, serif;
     font-size: 12px;
     color: #E6E6E6;
     text-align: center;
     letter-spacing: 1px;
     text-transform: uppercase;
     background-color: #4D4D4D;    
     position: absolute;
     top: 0;
     padding: 5px;
     width: 100%;
     margin-bottom: 1px;
     height: 28px;
     text-decoration: none;
}

a .title    
{
     text-decoration: none;
}

<a href="#">
    <div class="widget">  
        <div class="title">Underlined. Why?</div>  
    </div>
</a>

【问题讨论】：

你的文字没有为我加下划线。
我和 Nikola 在一起，没有下划线。此外，在发布演示时，请考虑整理您的空白；目标是制作一个我们可以轻松使用、查看和阅读的演示。此外，嵌套在 a 元素中的 div 在 HTML5 之外是无效的，因此在使用该结构时请确保您的文档类型。
我没有看到任何下划线。
根据我的测试，它在 IE7 和 IE6 中有下划线。
在下面查看我（和 Woz）的答案。或者，您可以将标签移动到 id 为“widget”的 div 标签内，它应该可以工作。

标签： css html text-decorations

【解决方案1】：

a:link{
  text-decoration: none!important;
}

=> 和我一起工作:)，祝你好运

【讨论】：

非常酷，谢谢！顺便说一句，当我需要为悬停加下划线时，同样的解决方案有效 - .some_title:hover { text-decoration: underline!important; }

【解决方案2】：

内联元素 (a) 中有一个块元素 (div)。这适用于 HTML 5，但不适用于 HTML 4。因此也只有实际支持 HTML 5 的浏览器。

当浏览器遇到无效标记时，它们会尝试修复它，但不同的浏览器会以不同的方式修复它，因此结果会有所不同。有些浏览器会将块元素移到内联元素之外，有些浏览器会忽略它。

【讨论】：

【解决方案3】：

使用CSS Pseudo-classes 并给你的标签一个类，例如：

<a class="noDecoration" href="#">

并将其添加到您的样式表中：

.noDecoration, a:link, a:visited {
    text-decoration: none;
}

【讨论】：

【解决方案4】：

在您的标题标签上添加此语句：

<style>
a:link{
  text-decoration: none!important;
  cursor: pointer;
}
</style>

【讨论】：

【解决方案5】：

尝试将您的 text-decoration: none; 放在您的 a:hover css 上。

【讨论】：

【解决方案6】：

如果你想要一个导航栏

ul{ list-style-type: none; } li{text-decoration: none;

这将使它想要将列表类型的样式设置为 None 或 nothing

带有标签：

a:link {text-decoration: none}

【讨论】：

【解决方案7】：

我有一个答案：

<a href="#">
    <div class="widget">  
        <div class="title" style="text-decoration: none;">Underlined. Why?</div>  
    </div>
</a>

有效。

【讨论】：

【解决方案8】：

为所有链接添加一个特定的类：

html：

<a class="class1 class2 noDecoration"> text </a>

在 CSS 中：

.noDecoration {
  text-decoration: none;
}

【讨论】：

【解决方案9】：

即使我删除了 'text-decoration: none;' 也没有下划线从你的代码。但我也有类似的经历。

然后我添加了一个代码

a{
 text-decoration: none;
}

和

a:hover{
 text-decoration: none;
}

所以，用 :hover 试试你的代码。

【讨论】：

【解决方案10】：

当我尝试自定义 WordPress 主题时，我很头疼，但文本装饰对我没有帮助。在我的情况下，我也必须删除 box-shadow。

a:hover {
    text-decoration: none;
    box-shadow: none;
}

【讨论】：

【解决方案11】：

作为旁注，请记住，在其他情况下，代码库可能会使用border-bottom css 属性，例如border-bottom: 1px;，它创建的效果与text-decoration: underline 非常相似。在这种情况下，请确保将其设置为无，border-bottom: none;

【讨论】：

【解决方案12】：

尝试将其添加到您的样式表中：

a {text-decoration:none;}

【讨论】：

可行，但我不想全局声明text-decoration: none。
然后给你的标签一个 id（或一个类），例如：<a class="noUnderline" href="#"> 并添加一个简单的 CSS 规则：.noUnderline { text-decoration: none }

【解决方案13】：

我使用下面的代码让我在 Chrome 中工作。您可以调整嵌套：

a:-webkit-any-link { color: black; }

【讨论】：

【解决方案14】：

我只是按照我知道它不正确但它可以快速修复的旧方式进行操作。

<h1><a href="#"><font color="#FFF">LINK</font></a></h1>

【讨论】：