CSS Gallery IE問題

我有這個圖片庫，它適用於其他瀏覽器，但不是IE瀏覽器，我很難理解爲什麼。我在Windows 7上的IE9上測試它。它會加載默認圖像並顯示所有內容，但在單擊縮略圖時不會更改圖像。下面的代碼CSS Gallery IE問題

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.image-gallery{ 
position:absolute; 
    width:600px; 
left:25%; 

padding:20px; 
} 
.image-gallery .big-image{ 
    width:605px; 
    height:450px; 
    padding:1px; 
    margin:0 auto; 
    background-color:white; 
} 
.image-gallery .big-image img{ 
    display:none; 
    margin:0 auto; 
#menu{ 
position:absolute; 
left:2%; 
top:2%; 

} 

} 
/*Selected image display*/ 
.image-gallery .big-image img:target{display:block;} 
/*on select image dusplay none the default image*/ 
.image-gallery .big-image img:target ~ img#default{display:none;} 
/*Shoe Default Image in first load*/ 
.image-gallery .big-image img#default{display:block;} 

.image-gallery ul{margin-top:1px;} 
.image-gallery li{float:left; 
    background-color:rgba(255,255,255,0.5);margin-right:3px;} 
.image-gallery li:hover{ 
    background-color:rgba(255,255,255,0.8); 
} 



</style>

現在主體部分

<div class="image-gallery"> 
<div class="title">Welcome to Jenny's Farm!</div> 
<div class="big-image">   
     <img id="img1" src="gallery/1.jpg" /> 
     <img id="img1" src="gallery/2.jpg" /> 
     <img id="img3" src="gallery/3.jpg" /> 
     <img id="default" src="gallery/1.jpg" /> 
</div></div> 
<div id="menu"> 
    <a href="#img1"><img src="gallery/1.jpg" height="50" width="75" /></a> 

    <a href="#img2"><img src="gallery/2.jpg" height="50" width="75" /></a> 

    <a href="#img3"><img src="gallery/3.jpg" height="50" width="75" /></a>

有什麼建議？我只使用CSS，沒有任何類型的JS。謝謝！

來源

2014-09-02 sandorfalot