a：hover IE 7の問題

Question

私は、ボタン上にシンプルなCSSベースのアニメーションを作成しようとしています（ホバー上にボタンを押したようにインデントする必要があります）。これはIE 7を除くすべてのBowersで動作します。私たちはこれをサポートしなければなりません。

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

IE7だけ<a>タグのdisplay:block属性を受け付けません。 zoom:1を適用して強制する必要があります。

Answer 3

私が正しく理解していれば

ほとんどのホワイトスペースの問題..

セットあなた..問題はhoverにoccuringされていませんが、一般的には、画像が誤整列されています

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

（がタグ間の空白を削除）

にHTMLまた

---

、@scumahは彼の答えで述べているように、なぜリンクの下のdivの背景として、ホバーを設定し、ちょうどhover（上のリンクに画像を変更して、完全に.gallery要素からそれを削除しません..）？

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