html - 浏览器中div文本下方的多余行

我正在使用Dreamweaver对我的网站进行编码。为了使整个div都可单击，我在锚元素中有一个带有文本的div，但是当在浏览器中显示时，Text下方有一条奇怪的Purple / Red线。

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

浏览器中的网站：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;
 }

最佳答案

text-decoration通常应用于链接，而不应用于链接中的元素。尝试以下方法：

a.Guides { text-decoration: none; }