Question

我遇到了一个难以理解的问题，我从头开始构建了这个滑块，你可以在测试点schwarttzy dot com看到。使用IE12，FireFox，Chrome在我的桌面上运行良好的代码。问题是，当我使用内置浏览器的机器人或浏览器内置的iPad（我不拥有它）时，我得到的只是一个黑色的空盒子。

尝试自己解决这个问题，我尝试了一个我在http://codepen.io/anon/pen/EVKbwv找到的简单滑块，它在我的机器人工厂浏览器中正常工作。这就是问题所在，当我将代码传递给http://schwarttzy.com/help.html时，它会与我的网站发生同样的事情，只不过是一个空白的空框。

body{background:#000;}

.container{
  margin:50px auto;
  width:500px;
  height:300px;
  overflow:hidden;
  border:10px solid;
  border-top-color:#856036;
  border-left-color:#5d4426;
  border-bottom-color:#856036;
  border-right-color:#5d4426;
  position:relative;

}
.photo{
  position:absolute;
  animation:round 16s infinite;
  opacity:0;

}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

这怎么可能？

Answer 1

所以我为我找到了解决方案。我忘记了这些旧的浏览器仍然需要

-webkit-animation

和

@-webkit-keyframes

，对于某些浏览器，顺序也很重要，例如

.slide_padding.number_slides5 {
     animation:five_slide 50s infinite;
     -webkit-animation:five_slide 50s infinite;}

然而，有一件事增加了混乱，旧版浏览器中的转换效果很好。我觉得很奇怪，我不需要

的webkit前缀

transition:opacity 2s ease-in-out;

纯CSS Slider在移动浏览器中不起作用

1 个答案: