文字装饰:没有不工作

Question

完全莫名其妙!我尝试过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>

Answer 1

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

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

Answer 2

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

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

Answer 3

使用CSS Pseudo-classes并为您的标记提供一个类,例如:

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

并将其添加到样式表:

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

Answer 4

在标头标记上添加此语句:

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