Internet Explorer 8에서 CSS 롤오버 문제가 발생했습니다.

Question

저는 지난 며칠간 Internet Explorer 8에서이 CSS 롤오버 메뉴를 사용하려고했습니다. 작동하지 않습니다. 그것도 활성 링크가 없습니다. 때로는 롤오버 이미지가 백그라운드에서 움직이는 것을 볼 수 있습니다. 도와주세요. 여기

<div class="lastfm"> 
<a href="http://www.last.fm/music/Endast"><img src="images/button5_lastfm.png" alt="ENDAST on Lastfm" name="ENDASTLastfm" width="71" height="32" border="0" id="ENDASTLastfm" /></a> </div> 

<div class="myspace"> 
<a href="http://www.myspace.com/Endast"><img src="images/button4_myspace.png" alt="ENDAST on MySpace" name="ENDASTMySpace" width="71" height="32" border="0" id="ENDASTMySpace" /></a> </div> 

<div class="youtube"> 
<a href="http://www.youtube.com/EndastMusic"><img src="images/button3_youtube.png" alt="ENDAST on YouTube" name="ENDASTYouTube" width="71" height="32" border="0" id="ENDASTYouTube" /></a> </div> 

<div class="twitter"> 
<a href="http://www.twitter.com/EndastMusic"><img src="images/button2_twitter.png" alt="ENDAST on Twitter" name="ENDASTTwitter" width="71" height="32" border="0" id="ENDASTTwitter"/></a></div> 

<div class="facebook"> 
<a href="http://www.facebook.com/EndastMusic" ><img src="images/button1_facebook.png" alt="ENDAST on Facebook" name="ENDASTFacebook" width="71" height="32" border="0" id="ENDASTFacebook"/></a> </div> 

는 CSS입니다 : 여기

는 HTML입니다

.facebook { 
    display:block; 
    background-image: url(../images/button1_facebook_rollover.png); 
    width:71px; 
    margin: 0px; 
    height: 32px; 
    background-repeat: no-repeat; 
    float: right; 
    padding-top: 0px; 
    padding-right: 3px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 
.facebook a:hover img { 
    visibility: hidden; 
} 
.facebook a:active img { 
    visibility: hidden; 
} 

.twitter { 
    background-image: url(../images/button2_twitter_rollover.png); 
    width:71px; 
    margin: 0px; 
    float: right; 
    height: 32px; 
    background-repeat: no-repeat; 
    padding-top: 0px; 
    padding-right: 3px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 
.twitter a:hover img { 
    visibility: hidden; 
} 
.twitter a:active img { 
    visibility: hidden; 
} 

.youtube { 
    background-image: url(../images/button3_youtube_rollover.png); 
    width:71px; 
    margin: 0px; 
    background-repeat: no-repeat; 
    float: right; 
    height: 32px; 
    padding-top: 0px; 
    padding-right: 3px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 
.youtube a:hover img { 
    visibility: hidden; 
} 
.youtube a:active img { 
    visibility: hidden; 
} 

.myspace { 
    background-image: url(../images/button4_myspace_rollover.png); 
    width: 71px; 
    margin: 0px; 
    background-repeat: no-repeat; 
    float: right; 
    height: 32px; 
    padding-top: 0px; 
    padding-right: 3px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 
.myspace a:hover img { 
    visibility: hidden; 
} 
.myspace a:active img { 
    visibility: hidden; 
} 

.lastfm { 
    background-image: url(../images/button5_lastfm_rollover.png); 
    width: 71px; 
    margin: 0px; 
    background-repeat: no-repeat; 
    float: right; 
    height: 32px; 
    padding-top: 0px; 
    padding-right: 190px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 
.lastfm a:hover img { 
    visibility: hidden; 
} 
.lastfm a:active img { 
    visibility: hidden; 
} 

Answer 1

당신이 마우스 사업부에 걸쳐, 당신이 할 수있을 때 이미지를 롤오버 할 경우

을

<a href="http://www.facebook.com/EndastMusic" >  
    <div class="facebook"> 
    </div> 
</a> 

CSS :

.facebook { 
    display:block; 
    background-image: url(images/button1_facebook.png); 
    width:71px; 
    margin: 0px; 
    height: 32px; 
    background-repeat: no-repeat; 
    float: right; 
    padding-top: 0px; 
    padding-right: 3px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 
.facebook:hover{ 
    display:block; 
    background-image: url(images/button1_facebook_rollover.png); 
    width:71px; 
    margin: 0px; 
    height: 32px; 
    background-repeat: no-repeat; 
    float: right; 
    padding-top: 0px; 
    padding-right: 3px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 

내 롤오버는 어떻게 작동합니까?