jquery - 仅当 anchor 标记包含 img 时才从图像中删除链接下划线

Question

<a href="#">
        <img width="103" height="100"  src="img source">
    </a>

对于上面的html代码，我使用了下面的css

a {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

a img {
    border: 0 none;
}

基本上我在这里试图实现的是在文本链接下划线同时保持 img 链接没有任何下划线。但是我想通过设置文本链接的样式我也在设置图像链接的样式，我希望链接中的任何图像都不应带有下划线。

有人可以建议解决这个问题吗？

Answer 1

经过大量谷歌搜索后，我终于找到了一个对我有用的巧妙技巧:

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

Why this works?

By default both anchors and images are inline elements and by applying vertical-align:top; to an image inside an anchor, we move the anchor to the top of the image. For some reason images have higher z-index than anchors.

来源:Remove Border from Image Links

顺便说一句，它会与像 a < img 这样的父选择器一起工作得很好...不幸的是，这尚未实现，但正在实现中。看这里:https://stackoverflow.com/a/45530/114029