Question

我有这个图片库，它可以在其他浏览器中使用，但不适用于IE，我很难理解为什么。我在Windows 7上的IE9上测试它。它加载默认图像并显示所有内容，但在单击缩略图时不会更改图像。这是代码

<!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。谢谢！

Answer 1

只是一个猜测，认为这是因为你正在使用IE不支持的default伪元素。要检查不同CSS元素和其他内容的浏览器可用性，建议使用此网站：http://caniuse.com（也许还有其他或更好的网站，但只是为了得到这个想法）。

只需查看默认值：http://caniuse.com/#search=default

CSS Gallery IE问题

1 个答案: