9

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

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

但是边框在图像上看起来不太好。我很好奇是否有一种方法可以删除仅使用纯 css 的包含图像的锚标记的边框？

4

6 回答 6

10

我发现了这个： 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更长的可见性（只要您的图像不透明）。

于 2013-07-29T13:17:51.487 回答
4

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

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

如果您的大多数链接不包含图像，您可以使用否定方法并在那些包含图像的链接上设置一个类，例如，并在 CSS 中class=imagelink使用选择器。:not(.imagelink)支持:not(...)是广泛的，但不是普遍的。另一种方法，不指望这种支持，是在你的问题中的所有链接上设置一个底部边框，然后为图像链接关闭它：

a.imagelink {border-bottom: none;}
于 2012-12-29T20:03:08.400 回答
2

不幸的是，不可能！我想我只使用 jquery 完成了这个。

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

活动孩子的父母的复杂 CSS 选择器

有 CSS 父选择器吗？

于 2012-12-29T20:04:17.990 回答
2

无法使用css，但css如果添加使用jQuery. 这是一个例子

a! >  img { border: none; }​

如果它是标签的父标签，上面css的规则会从标签中删除边框，但现在它仍然不是 pure ，具有依赖关系。aimgcss

于 2012-12-29T20:09:21.207 回答
2

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

我希望我可以在这里使用公认的解决方案，但它会导致文本块内的内联图像对齐，以及上述问题。

box-shadow我已经决定在底部做一个纯白色，也许是IE8 和更早版本a > img的备份阴影，然后就结束了。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  }
于 2014-01-16T16:54:31.487 回答
0

正如您问题的其他答案所说，现在不可能用 CSS 来做。但是如果你使用 jQuery，这个效果很好：

$(document).ready(function(){

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

});

它基本上在页面加载后搜索包含图像的链接并声明css规则边框：无；对于图像的父元素，即。链接。

于 2017-09-15T01:04:05.520 回答