css - 包含图像的 anchor 标记上没有边框

Question

我的文档中有一个 anchor 标记的全局规则:

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

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

Answer 1

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

它基本上是一个非常简单的 hack，如下所示:

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

它就像一个魅力，没有浏览器冲突:请参阅文章了解更多详情。

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