Html 答：悬停IE 7问题

我正在尝试在按钮上创建一个简单的基于CSS的动画（悬停时，它应该像按下按钮一样缩进）。它适用于除IE7之外的所有bowers，我们被迫支持IE7

--------编辑--------

**这是IE 7中问题的屏幕截图：

这就是应该发生的事情：

任何有关IE 7修复的帮助都将不胜感激！谢谢大家!

CSS:

HTML:

IE7不会只接受
标签上的
显示：block
属性。您必须通过应用
zoom:1
强制它
 在我看来，这是一个在IE7（）中工作的更干净的解决方案：

HTML:

您只需要更改url图像，就可以开始了

编辑：和更好的解决方案，使用。Jsfiddle

如果我理解正确，问题并不是出现在
悬停
上，但通常情况下，图像对齐错误

很可能是空白区问题

将html设置为

<div class="gallery"><a href="http://www.sba.muohio.edu/mis399/student/ScheduleWinterSoutheastAsiaPlanAasdfseoinbxsdfjjdgccc.htm" style="margin-top:10%;"></a></div>

代码中没有与动画相关的内容，也没有与缩进相关的内容。。实际问题是什么？（应该发生什么以及发生了什么…）你能澄清一下你说它不起作用是什么意思吗？发生了什么，它与您期望的有什么不同？对不起，它的行为应该是这样的：，相反，我可以在IE 7中看到两个图像（未链接的图像和单击的图像）overlapping@GabyakaG.Petrioli请检查我想添加的问题的编辑：图像应该在精灵中，所以在第一次悬停时不会出现空白。
<div class="gallery">
        <a href="http://www.sba.muohio.edu/mis399/student/ScheduleWinterSoutheastAsiaPlanAasdfseoinbxsdfjjdgccc.htm" style="margin-top:10%;"></a>
           </div>

<a href="#">Link</a>

a {
    /* PageImages/Itinerary.gif */
    background-image: url('http://placehold.it/50');
    display: block;
    height: 50px;
    width: 50px;
    text-indent: -99999px;
}
a:hover {
    /* PageImages/hover.gif */
    background-image: url('http://placehold.it/50/09e');
}

a {
    background-image: url('http://i44.tinypic.com/34j3g53.gif');
    display: block;
    height: 75px;
    width: 200px;
    text-indent: -99999px;
}
a:hover {
    background-position: 0 -75px;
}

<div class="gallery"><a href="http://www.sba.muohio.edu/mis399/student/ScheduleWinterSoutheastAsiaPlanAasdfseoinbxsdfjjdgccc.htm" style="margin-top:10%;"></a></div>

.gallery a:hover {
    background-image:url(PageImages/hover.gif);
}