Question

我有一个page，其中一个大图片也有一个链接元素，我想从图片链接中删除下划线。我在Chrome中工作，它在图片链接下显示突出显示并声称user agent stylesheet引入了css，我理解这是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;
}

非常感谢其他人提供的关于删除此下划线的任何帮助！

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;
}

Answer 2

只需将border属性设置为零：

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

Answer 3

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

如果您希望CSS也使用ID img定位元素内的img-link元素，请使用以下CSS。

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

Answer 4

我不太确定但你可以试试这个：

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

我希望它能解决它

Answer 5

问题似乎来自您的css .content a中添加的下划线，请尝试添加：

    border-bottom: none;

到你的img-link css

从图像链接中删除下划线

5 个答案: