如何去掉包含在锚点中的图片下划线？

Question

无论如何，我有一个问题。我想这是一个微小的问题，但它一直困扰着我。我更新了博客上锚点的CSS，使其带有下划线和边框。问题是现在所有链接的图片都有下划线，看起来很奇怪。

因此，我认为唯一解决这个问题的方法是将CSS类应用于所有锚点内部的图像，以便它们具有border: none;。不过我不知道该怎么做。是否有人愿意解释一下这是否可能？提前感谢。

- Johnny

Answer 1

试试这个：

<style type="text/css">
a img { text-decoration: none } // Images within 
</style>

然而，这种方法太过笼统，如果您的锚点有填充，它将无法完全生效，可能会在图像右侧和左侧留下残余的下划线。

最好的方法是总体关闭链接的下划线，在锚点中定义CSS类，并在该类中打开下划线。

a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }

- Pekka

---

谢谢，我找到问题了，我只是过于复杂化了这个问题 :) - Johnny

Answer 2

试试这个：

a img { border:none; vertical-align:top; }

它将下划线移到图像的顶部和底部。

- Matt Parkins

Answer 3

下划线由text-decoration CSS属性控制。因此，如果您想关闭它：

a { text-decoration: none; }

- cletus

Answer 4

在jQuery中，您可以使用{{link1：has选择器}}将类添加到所有包含图像的链接中：

$('a:has(img)').addClass('image-link');

然后在你的CSS中移除这些链接的边框：

a.image-link {
    border-bottom-style: none;
}

只有在启用JavaScript的情况下才能正常工作。

- Paul D. Waite