css - 链接时图像下方的边距

Question

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

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

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

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

如果有人能提供帮助，我将不胜感激。

谢谢，

Answer 1

图像图标为 PNG 格式并具有透明背景。这就是为什么您可以看到背景的原因。您可以将图标更改为白色背景(与 JPEG 相同)，您将不再看到背景。

更快的解决方法是添加一个新的 CSS 规则，该规则仅适用于社交媒体 div 内的 a 标签:

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