去掉图像链接下划线

Question

我有一个带有单个大图像的页面，它还有一个链接元素，我想要去掉图片链接下划线。我正在使用Chrome浏览器，在该浏览器中会在图片链接下方显示高亮，并声明CSS被user agent stylesheet引入，默认为Chrome的CSS。 user agent stylesheet将以下样式应用到我的页面：

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

我该如何去掉这个图片链接下划线？我尝试将链接和图片的id设置为img-link，然后使用以下css来定位该id，但没有成功：

<a id="img-link" href="/images/post_images/mapping_early_english_books/provincial_printing.png" data-lightbox="provincial_printing" data-title="My caption">
  <img id="img-link" src="/images/post_images/mapping_early_english_books/provincial_printing.png" alt="Provincial Printing" style="width:100%" /></a></p>

#img-link {
    text-decoration: none;
}

希望能得到他人对去除这个下划线的帮助，将不胜感激！

- duhaime

Answer 1

#img-link, #img-link img{
   text-decoration: none !important;
   border:0px !important;
   outline:none;
   border-width: 0px;
   outline-width:0px;
   border-bottom: none;
}

- Saurabh Singh Mehra

---

谢谢@SaurabhSinghMehra，这个完美地解决了我的问题！为了以后参考，为什么border、outline、border-width和outline-width会影响这里的链接？ - duhaime

实际上，主要的是text-decoration：none；但我使用其他方法使其完美工作。只使用text-decoration：none；也可以轻松实现这一点。 - Saurabh Singh Mehra

Answer 2

只需将边框属性设置为零：

#img-link {
   text-decoration: none;
   border: 0 !important;
}

- BeardedMan

---

在给出反对票之前，请先检查真实的示例，并提出解决方案-将边框设置为零确实可以解决这个问题，谢谢。 - BeardedMan

这是所有答案中唯一有效的答案。对于所有相关问题，比所有答案都要好。应该标记为正确答案。非常感谢！ - Berat Cevik

在text-decoration后添加!important后，此解决方案可行，将边框设置为0可以修复它。谢谢！ - loïc

Answer 3

我不是很确定，但你可以试试这个：

#img-link {
  text-decoration: none !important;
}

我希望它能解决这个问题

- IKEN Lemjahed Ayoub

---

这实际上完全没有问题，所以对于那些对我的回答投了反对票的人来说，下次在评判之前先检查一下答案，我很确定是同一个人给所有其他答案投了反对票，所以下次不要着急，你既不是上帝，也不是一个有权利在未经测试的情况下评判别人答案的重要参考。我尊重这个社区，否则我的回答会用不同的方式表达，而且会少得多礼貌。 - IKEN Lemjahed Ayoub

Answer 4

不要给多个元素赋相同的ID值。

如果你想让你的CSS也能够针对ID为的元素内部的元素，可以使用以下CSS。

#img-link, #img-link img{
    text-decoration:none;
    border-width: 0px;
}

- Thriggle

Answer 5

问题似乎出在您的 CSS 中添加了下划线 .content a，请尝试添加以下内容：

    border-bottom: none;

到你的img-link css

- William

---

抱歉，@William，没有运气！ - duhaime