Question

我在易趣页面上使用CSS滑块（因为易趣不会让你上传脚本等）但我发现它在IE中不起作用。 Coyld没弄清楚如何修复它。有办法解决吗？或者是否有一个没有脚本的滑块，可以在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>

Answer 1

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

Answer 2

也许您应该查看canIuse.com以查看浏览器兼容性。它可能会有所帮助！

Answer 3

所有这些-webkit前缀表示您复制和粘贴的任何CSS仅适用于webkit浏览器（Google Chrome，Safari等）

不幸的是，没有webkit，我想不出很多只有CSS的图库解决方案。

CSS滑块在IE中不起作用

3 个答案: