css - 在 IE7 中悬停时元素略有移动

Question

我有一个元素在 IE7 中悬停时导致下面的元素轻微移动。

您可以在此处查看相关元素:http://andovertowncouncil.customstudio.co.uk/

在右侧边栏中，每个元素都有一个 H2 标题。当您在 IE7 中将鼠标悬停在上面时，下面的元素将向下移动 2/3 像素。如果您随后将鼠标悬停在其他东西上，例如按钮，这个较低的元素将返回到其原始位置。

我尝试将悬停效果变得非常具体:

.right-item h2 a:hover {
margin-bottom: 5px;
border-bottom: none;
padding-bottom: 0;
text-decoration: none;
line-height: 30px;
}

但没有成功。

如果有任何关于如何解决这个问题的建议，我将不胜感激？

提前致谢

汤姆

Answer 1

无法说明您为什么要在悬停时添加以下规则，但它们是导致您的内容发生变化的原因:

.right-item h2 a:hover {
    border-bottom: medium none;
    line-height: 30px;
    margin-bottom: 5px;
    padding-bottom: 0;
    text-decoration: none;
}

a:hover {
    border-bottom: medium none;
}

如果删除，所有浏览器中的一切看起来都不错。