从超链接图像中删除下划线答案

【问题标题】：Remove the underline from Hyperlinked Image从超链接图像中删除下划线
【发布时间】：2013-06-16 11:49:12
【问题描述】：

一切都是从这两个代码开始的

            #Header .Logo   
                  {                
            background: url('http://s24.postimg.org/69nibdvz9/Header_P     .png') no-repeat 0px 0px;
            height: 186px;
            width: 100%;
            position:relative;
            top: 0px;
            margin: 0px 0px -5px;
            clear: both;

和

             <div class="Logo"><center><img src="http://s1.postimg.org/g6dji2wfj/Logo.png" style="position: relative; top: 50px;" width="640" height="160" alt="{SourceTitle}" /></center>
            </div>

基本上，我有一个标题和我网站的徽标。由于我使用的是徽标而不是标题，因此我希望图像具有链接。所以我补充说：

             <div class="Logo"><center> <a href="http://oldtimesdaily.tumblr.com"><img src="http://s1.postimg.org/g6dji2wfj/Logo.png" style="position: relative; top: 50px;" width="640" height="160" alt="{SourceTitle}" /></a></center>
            </div>

现在的问题是链接创建的下划线很难看。如何删除它？我尝试在 .Logo 和本身中添加“style="text-decoration:none;"，但没有任何区别。有帮助吗？

【问题讨论】：

<center> is deprecated。请不要使用它。

标签： html css hyperlink underline

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

锚点在图像周围设置了一个边框。

为图片样式添加边框属性

<img src="http://s1.postimg.org/g6dji2wfj/Logo.png" style="position: relative; top: 50px; border: none;" width="640" height="160" alt="{SourceTitle}" />

Here is the fiddle

【讨论】：

【解决方案3】：

如果您使用 css 设置链接样式，则该行应该消失

a:link {color:#;}      /* unvisited link */
a:visited {color:#;}  /* visited link */
a:hover {color:#;}  /* mouse over link */
a:active {color:#;}  /* selected link */

http://www.w3schools.com/css/css_link.asp

【讨论】：

【解决方案4】：

您可能应该添加这行 css，以便链接中的任何图像都不会显示边框或下划线。

.Logo a,.Logo a img{
border:none;
text-decoration:none;
}

另外作为旁注，除非您有多个徽标，否则您可能应该使用 ID 而不是 CLASS 作为最佳实践。仅当可能有多个元素需要相同样式时，才在 css 中使用类。

因此制作代码：

#Logo a, #Logo a img{
border:none;
text-decoration:none;
}

【讨论】：