如何解决这个奇怪的 IE 8 img 锚悬停行为？答案

【问题标题】：How can I fix this strange IE 8 img anchor hover behaviour?如何解决这个奇怪的 IE 8 img 锚悬停行为？
【发布时间】：2009-09-24 06:54:33
【问题描述】：

如果我将它添加到我的 CSS...

small a:hover, a:hover {background-color: #CCC; }

在 IE 8 中查看时也是链接的所有图像都会发生这种情况（在 Firefox 中很好）...

它们看起来不错...

直到我将鼠标悬停在它们上方...

如果我删除 CSS 行，行为就会消失。我试过用谷歌搜索，但我遇到了不相关的问题。

【问题讨论】：

【解决方案1】：

默认情况下，图像的底边与文本的基线对齐。您看到的灰色空间是基线下方的空间，由 q、p、y 等减速器使用。（您没有文本的事实无关紧要 - 仍然为下降器保留空间。）

你可以像这样摆脱它：

a img {  /* You might want to make this rule more specific! */
    vertical-align: bottom;
}

请参阅 That mysterious gap under images 了解有关此问题的完整讨论。

【讨论】：

【解决方案2】：

您也可以尝试将该项目的 line-height 设置为 0。

【讨论】：

【解决方案3】：

试试

a {
    margin:  0px;
    padding: 0px;
}

【讨论】：

【解决方案4】：

我认为您可能需要将图像的边框设置为无，所以边框：无；

【讨论】：