链接时图像下方的边距

Question

我到处都找不到这个问题的答案，我想可能是因为没有人遇到过同样的问题，或者可能是因为这是一个非常具体的问题。

我遇到的问题是，当我正在处理的网站上的链接图像悬停在其上时，其下方有一个小边框，这在所有浏览器中都是如此（除了 IE 7，该网站最初是在该浏览器中设计的）。这是由于将 a:hover 设置为具有背景。尽管没有为图像设置边框、边距和填充，但由于某种原因它仍然不满意。

我只有两种方法来解决它，在某些标签上设置一个没有背景的类，或者将链接的图像显示为块。不幸的是，这两种解决方案都不合适，因为该网站有数百个页面，可能还有数千个链接图像，使用类意味着找到所有这些！使用显示块会破坏一些图像的显示，例如当它们在 ap 标签中很好地居中时。

如果您想要一个对我不起作用的示例，相关网站的主页是 http://www.tameside .gov.uk，看看右上角的社交媒体图标，它们都得到了背景悬停处理。

如果有人能提供帮助，我将非常感激。

谢谢，

Answer 1

图像图标为 PNG 且具有透明背景。这就是为什么你可以看到背景。
您可以将图标更改为白色背景（与 JPEG 相同），您将不再看到背景。

更快的修复方法是添加一条新的 CSS 规则，该规则仅适用于社交媒体 div 内的 a 标签：

.banner_container .social a {
    background: none !important;
}