Html CSS滑块在IE中不工作

我在ebay页面上使用CSS滑块（因为ebay不允许你上传脚本等），但我发现它在IE中不起作用。Coyldn不知道如何修复它。有办法绕过它吗？或者有没有一个没有脚本的滑块可以在IE8+中工作

以下是css：

 img {
border: none;
}
a {
outline: none;
}
/* Fades in the slideshow. Hides the initial animation on the li tag.*/
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}

ul#slider {
-webkit-border-radius: 10px;
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 700px;
height: 438px;
overflow: hidden;
}
ul#thumb {
overflow: none;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
position: relative;
background: #000;
overflow: auto;
width: 700px;
}
ul#thumb a {
-webkit-transition: opacity .2s ease-in-out;
border: 1px solid #979797;
width: 70px;
height: 50px;
display: block;
overflow: hidden;
float: right;
margin: 10px 0px 0px 10px;
opacity: 0.75;
}
ul#thumb a:hover {
opacity: 1;
}
ul#slider li {
width: 700px;
height: 438px;
position: absolute;
}
ul#slider li p {
position: absolute;
bottom: -1px;
left: 0;
z-index: inherit;
color: #fff;
background: rgba(0, 0, 0, .5);
width: 100%;
}
ul#slider li p span {
line-height: 0.5em;
padding: 10px;
display: block;
}
/* Animation for the :target image. Slides the image in. */
@-webkit-keyframes moveTarget {
0% {
left:-700px;
}
100% {
left:0px;
}
}
ul#slider li:target {
-webkit-animation-name: moveTarget;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
z-index: 10;
}
/*
Animation for the current image. Slides it out the frame and back to the starting position.
Adds a lower z-index than the now current image.
*/
@-webkit-keyframes moveIt {
0% {
left:0px;
}
50% {
left:700px;
}
100% {
left:-700px;
z-index: 5;
}
}
ul#slider li:not(:target) {
-webkit-animation-name: moveIt;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
}

和HTML：

    <ul id="slider"> <li id="1"> <img src="(image link)" alt="" width="700" height="438" />
</li><li id="2"> <img src="(image link)" alt="" width="700" height="438" />
</li>
<li id="3"> <img src="(image link)" alt="" width="700" height="438" />
</li>
<li id="4"> <img src="(image link)" alt="" width="700" height="438" />
</li>
<li id="5"> <img src="(image link)" alt="" width="700" height="438" />
</li>
</ul>
<ul id="thumb">
<li><a href="#1"><img src="(image link)" alt="" width="70" height="50" /></a></li>
<li><a href="#2"><img src="(image link)" alt="" width="70" height="50" /></a></li>
<li><a href="#3"><img src="(image link)" alt="" width="70" height="50" /></a></li>
<li><a href="#4"><img src="(image link)" alt="" width="70" height="50" /></a></li>
<li><a href="#5"><img src="(image link)" alt="" width="70" height="50" /></a></li>
</ul>
</div>

不幸的是，一个跨浏览器的纯CSS图像滑块目前并不是一个真正的选择。使用此滑块将导致早期版本的Internet Explorer出现问题，无论您做什么。如果您需要真正的浏览器支持，那么您必须查看一个使用Javascript的滑块。

所有这些

-webkit

前缀表明您复制和粘贴的任何CSS都只适用于webkit浏览器（Google Chrome、Safari等）

---

不幸的是，如果没有webkit，我想不出多少只支持CSS的图库解决方案。

也许你应该看看浏览器的兼容性。这可能会有帮助

animation

是CSS3，仅在IE10+中受支持，并且您的代码仅适用于较旧的webkit浏览器（Chrome/Safari/Opera），因此它在Firefox中甚至不起作用。