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

Question

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

我有文字装饰:无；在代码中。任何帮助将不胜感激!

浏览器中的网站:http://test.crows-perch.com/

相关文本的 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; }