a：悬停IE 7问题

我想要一个简单的基于CSS的动画按钮（在悬停它应该缩进像一个按钮被按下）。它可以在除IE 7以外的所有系统中运行，我们不得不支持这些功能。a：悬停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>

来源

2011-10-28 JDV590

在代码中没有与动画相关的内容，并且与缩进无关。什么是实际问题？（*应该发生什么，取而代之的是什么.. *） –

当你说它不起作用时，你能澄清你的意思吗？会发生什么，它与预期的有什么不同？ – Guffa

对不起，它应该这样行事：[link]（http：//www.nucopy。），而是我可以在IE 7中看到两个图像（未点击和点击的图像）重叠 – JDV590

这一点，在我看来，一个更清洁的解决方案，将在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'); 
}

你只需要改变url图像，你很好去。

编辑：和更好的解决方案，使用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; 
}

来源

2011-10-28 17:36:18 scumah

我想补充说：图像应该在一个精灵，所以那里woulnt是第一次悬停的空白。 –

-1

IE7将不只是接受<a>标签一个display:block属性。你必须通过应用zoom:1来强制它。

来源

2011-10-28 17:13:29 Joshua

IE接受它就好了..尝试http://jsfiddle.net/XMBWr/1/ –

如果我理解正确，这个问题是不是存在的在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); 
}

来源

2011-10-28 17:52:33

a：悬停IE 7问题

回答

相关问题