Question

我使用Dreamweaver编写我的网站代码。我在一个锚元素中有一个带有文本的div，以便使整个div可以点击，但是当在浏览器中显示时，文本下方有一条奇怪的紫色/红色线。

我有文字装饰：无;在代码中。任何帮助将不胜感激！

有问题的文字的HTML：

<a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

所有相关元素的CSS：

     #Guides {
     z-index: 4;
     position: relative;
     margin: 0 auto;
     top: -135px;
     right: 89px;
     width: 133px;
     height: 65px;
     background: url(../images/button%20texture%20b.jpg);
     border-style: solid;
     border-width: 1px;
     border-color: #7F7F7F;
     border-top: none;
     border-bottom: none;
     text-align: center;
  }

#Guides:hover {
     width: 133px;
     background:url(../images/button%20overlay%20b.png) no-repeat center,        url(../images/button%20texture%20b.jpg) no-repeat top left;
     background-size: cover;
}

 #GuidesT {
     text-decoration: none;
     font-family: "Cinzel Regular";
     font-size: 18px;
     letter-spacing: 1px;
     color: #D2C300;
     line-height: 65px;
     vertical-align: middle;
 }

Answer 1

text-decoration通常应用于链接，而不是其中的元素。试试这个：

a.Guides { text-decoration: none; }

浏览器中div文本下方的不需要的行

1 个答案: