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

为什么会这样？

默认情况下，锚点和图像都是内联元素并通过应用   垂直对齐：顶部;对于锚内的图像，我们移动锚   到图像的顶部。由于某种原因，图像具有更高的z指数   而不是锚。

来源：Remove Border from Image Links

顺便说一下，对于像a < img这样的父选择器来说它会很好用......不幸的是，这还没有实现，但是在工作中。看看这里：https://stackoverflow.com/a/45530/114029

Answer 2

下划线是由a上的文字装饰引起的。所以只需将text-decoration:none应用于a。

修改：目前没有以CSS为单位的方式将样式应用于“a作为其子代的img”。 CSS没有选择器。因此，你必须通过给它们类（或其他属性）来使这些a唯一，并将CSS应用于这些类，或运行一些在{{1}中测试img的脚本s并为那些a提供所需的样式。

Answer 3

您可以使用CSS Descendent Selector

所以，在你的情况下：

a > img { text-decoration: none; }

但是，上面的规则会将样式添加到图像（即后代）而不是父项，因此它可能不是您要查找的内容。不幸的是，没有CSS规则在后代的情况下将样式应用于父级。

Answer 4

如果你不能为其中包含图像的每个链接设置一个类，那么你必须使用javascript。你可以简单地添加这样的东西：

jQuery(document).ready(function($) {
    var a_with_img = $('a').children()
    $(a_with_img).parent().css('text-decoration', 'none');
});

这应该可行，但是用js定位所有'a'选择器绝不是一个好主意，它在负载上相当沉重。可能会导致整体页面加载速度变慢。

Answer 5

我已经使用jquery解决了这个问题，只需将jquery.js链接到头部并将其放入正文中：

    <script type="text/javascript">

        $("body").ready(function () {

                $("a").has("img").addClass("imglink");

        });
</script>

然后设置类a.imglink

的样式

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

5 个答案: