Question

我试图在一个按钮上有一个简单的基于CSS的动画（在悬停时它应该像按下按钮一样缩进）。除了我们被迫支持的IE 7之外，它适用于所有的支持者。

-------- -------- EDIT

**这是IE 7中问题的一个屏幕： LINK

这应该发生的事情：LINK

任何帮助修复IE 7的任何帮助表示赞赏！谢谢！

CSS：

  /*itinerary Button Style*/    
    .gallery {
background-image:url(PageImages/hover.gif);
background-repeat: no-repeat;
height: 75px;
width: 200px;
}

.gallery a{
background-image:url(PageImages/Itinerary.gif);
background-repeat: no-repeat;
height: 75px;
width: 200px;
display: block;
}

.gallery a:hover{
background: none;
}

HTML：

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

Answer 1

在我看来，这是一个更清洁的解决方案，可以在IE7中运行（http://jsfiddle.net/YYUef/1/）：

HTML：

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

CSS：

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');
}

你只需要更改网址图片，就可以了。

编辑：使用css sprites更好的解决方案。 Jsfiddle here。

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;
}

Answer 2

如果我理解正确，hover上没有出现问题，但一般情况下，图片不对齐..

很可能是白色空间问题..

将你的HTML设置为

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

（删除标记之间的空格）

另外，正如@scumah在他的回答中所说，为什么要将悬停设置为链接下方div的背景，而不仅仅是更改hover上链接上的图像（并将其从完全.gallery元素.. ）？

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

Answer 3

IE7不会仅接受display:block标记上的<a>属性。您必须通过应用zoom:1强制执行此操作。

a：悬停IE 7问题

3 个答案: