【发布时间】：2012-12-14 15:37:54
【问题描述】：
我的文档中有一个锚标记的全局规则：
a,a:hover {border-bottom: 1px solid #ccc;}
但是边框在图像上看起来不太好。我很好奇是否有一种方法可以删除包含仅使用纯 css 的图像的锚标记的边框？
【问题讨论】：
【发布时间】：2012-12-14 15:37:54
【问题描述】：
我发现了这个：http://konstruktors.com/blog/web-development/1122-remove-border-from-image-links/
它基本上是一个非常简单的 hack，如下所示：
a img { border:none; vertical-align:top; }
它就像一个魅力，没有浏览器冲突：有关更多详细信息，请参阅文章。
编辑：border:none 在大多数情况下实际上并没有做任何有用的事情。边框在锚点上，而不是 img 标签，所以如果您已经使用全局 CSS 重置将锚定图像的边框归零，您只需要vertical-align:top 将a 的边框向上推在图像后面，使其不再可见（只要您的图像不透明）。
【讨论】：
-
虽然，我注意到了一些东西。如果图像是 png 格式并且是透明的，您将能够看到它后面的边框。所以不酷。但又要知道一些事情。 @exotec
正如您问题的其他答案所说，现在不可能使用 CSS 来实现。但是如果你使用 jQuery，这个效果很好：
$(document).ready(function(){
$('a img').parent().css('border','none');
});
它基本上在页面加载后搜索包含图像的链接，并为图像的父元素声明 css 规则 border:none;。链接。
【讨论】：
vertical-align 技巧仅适用于非透明图像 [很好]，如果 a line-height 大于图像高度（想想小的社交网络图标）则根本不起作用。
我希望我可以在这里使用公认的解决方案，但它会导致文本块内的内联图像对齐，以及上述问题。
我已经决定在a > img 的底部做一个纯白色的box-shadow，也许是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 }
【讨论】：
-
您可能还想将
vertical-align: bottom;添加到img
不，目前 CSS 中没有选择器可以根据其后代选择元素。您需要在 CSS 中使用 JavaScript 或类。
最可靠的是，您可以在所有不包含图像的链接上使用class 属性，并在您的 CSS 规则中使用相应的类选择器。
如果您的大多数链接不包含图像，您可以使用否定方法并在那些包含图像的链接上设置一个类，例如 class=imagelink，并在 CSS 中使用 :not(.imagelink) 选择器。对:not(...) 的支持很普遍，但并不普遍。另一种不依赖这种支持的方法是在您的问题中为所有链接设置底部边框，然后将其关闭以用于图像链接：
a.imagelink {border-bottom: none;}
【讨论】：
使用css 是不可能的，但是如果你添加使用jQuery 的cssParentSelector.js 脚本，你可以使用css 来做到这一点。 Here is an example
a! > img { border: none; }
如果a 标记是img 标记的父级，则css 规则会从a 标记中删除边框，但现在它仍然不是纯css，具有依赖关系。
【讨论】：
很遗憾，这不可能！我想我只使用 jquery 完成了这项工作。
http://www.w3schools.com/cssref/css_selectors.asp
【讨论】：