a:悬停IE 7问题

时间:2011-10-28 17:08:58

标签: html css internet-explorer-7 hover

我试图在一个按钮上有一个简单的基于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>

3 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

如果我理解正确,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);
}

答案 2 :(得分:-1)

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