Question

我的文档中有一个锚标记的全局规则：

a,a:hover {border-bottom: 1px solid #ccc;}

但边框在图像上看起来并不好看。我很好奇是否有办法只使用纯css删除包含图像的锚标签的边框？

Answer 1

我发现了这个：http://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/

它基本上是一个非常简单的黑客，看起来像这样：

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

它就像一个魅力，没有浏览器冲突：有关详细信息，请参阅文章。

编辑：在大多数情况下，border:none实际上并没有做任何有用的事情。边框位于锚点上，而不是img标记，因此如果您已经使用全局CSS重置将锚定图像上的边框清零，则只需要vertical-align:top来推送a' s在图像的上方和后方，因此它不再可见（只要您的图像不透明）。

Answer 2

不，CSS中当前没有选择器可以根据后代选择元素。您需要在CSS中使用JavaScript或类。

最强健的是，您将在所有不包含图像的链接上使用class属性，并在CSS规则中使用相应的类选择器。

如果您的大部分链接都不包含图片，则可以使用否定方法并在包含图片的链接上设置类，例如class=imagelink，并在CSS中使用:not(.imagelink)选择器。对:not(...)的支持很普遍，但并不普遍。另一种不依赖于此类支持的方法是在问题中为所有链接设置底部边框，然后将其关闭以用于图像链接：

a.imagelink {border-bottom: none;}

Answer 3

不幸的是，不可能！我想我只是用jquery做过这个。

http://www.w3schools.com/cssref/css_selectors.asp

Complex CSS selector for parent of active child

Is there a CSS parent selector?

Answer 4

使用css是不可能的，但如果您添加使用css的{{3}}脚本，则可以使用jQuery执行此操作。 cssParentSelector.js

a! >  img { border: none; }

上面的css规则会删除a标记的边框（如果它是img标记的父标记，但现在它仍然不是纯css，具有依赖关系。< / p>

Answer 5

vertical-align技巧仅适用于[非]透明图像，如果a line-height大于图像高度，则根本不起作用（想想小社交网络图标）。

我希望我可以在这里使用已接受的解决方案，但它会抛弃文本块中内嵌图像的对齐，以及上述问题。

我已经决定在box-shadow的底部做一个稳定的白色a > img，也许是IE8及更早版本的备用filter阴影，并称之为一天。不要弄乱布局：

a { text-underline: none; 
    border-bottom: 1px solid blue; }

a img { box-shadow: 0 .333em 0 0 white; /* white, or your background color */
        filter: progid:DXImageTransform.Microsoft.Shadow... etc  }

Answer 6

正如你问题的其他答案所说的那样，现在用CSS做这件事是不可能的。但是如果你使用jQuery，这项工作很棒：

$(document).ready(function(){

   $('a img').parent().css('border','none');

});

它基本上在页面加载后搜索包含图像的链接，并说明图像的父元素的css规则 border：none; ，即。链接。

包含图像的锚标签上没有边框

6 个答案: