为什么我的CSS Slider在IE中工作？

时间：2014-10-19 12:26:56

标签： css internet-explorer 

<style media='screen' type='text/css'>
#content-slider {
height: 335px;
width: 100%;
}
#slider {
background: #000000;
border: 5px solid #000000;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
height: 320px;
margin: 10px auto;
overflow: visible;
position: relative;
width: 680px;
}
#mask {
height: 320px;
overflow: hidden;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:680px;
height:320px;
position:absolute;
top:-325px;
list-style:none;
}

#slider li.firstanimation {
-moz-animation:cycle 55s linear infinite;   
-webkit-animation:cycle 55s linear infinite;
-keyframes-animation:cyclefive 55s linear infinite;     
 }
#slider li.secondanimation {
-moz-animation:cycletwo 55s linear infinite;
-webkit-animation:cycletwo 55s linear infinite; 
-keyframes-animation:cyclefive 55s linear infinite; 
}
#slider li.thirdanimation {
-moz-animation:cyclethree 55s linear infinite;
-webkit-animation:cyclethree 55s linear infinite;
-keyframes-animation:cyclefive 55s linear infinite;     
}
#slider li.fourthanimation {
-moz-animation:cyclefour 55s linear infinite;
-webkit-animation:cyclefour 55s linear infinite;
-keyframes-animation:cyclefive 55s linear infinite;     
}
#slider li.fifthanimation {
-moz-animation:cyclefive 55s linear infinite;
-webkit-animation:cyclefive 55s linear infinite;
-keyframes-animation:cyclefive 55s linear infinite;     
}

#slider .tooltip {
position:absolute; 
left:0px; 
bottom:0px; 
background:#000; 
color:#fff; 
opacity:0.7; /* Overridden by captionOpacity setting */ 
width:100%; 
z-index:89; 

}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:100;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip, 
#slider li#fourth:hover .tooltip, 
#slider li#fifth:hover .tooltip {
left:0px;
}

/* PROGRESS BAR */
.progress-bar { 
position:relative;
top:-5px;
width:680px; 
height:5px;
background:#000;
-moz-animation:fullexpand 55s ease-out infinite;
-webkit-animation:fullexpand 55s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
0%  { top:0px; }
4%  { top:0px; } 
16% { top:0px; opacity:1; z-index:0; } 
20% { top:325px; opacity:0; z-index:0; } 
21% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }

}
@-moz-keyframes cycletwo {
0%  { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; } 
36% { top:0px; opacity:1; z-index:0; } 
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; } 
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0%  { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; } 
56% { top:0px; opacity:1; } 
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; } 
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0%  { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0%  { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; } 
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }

}
@-webkit-keyframes cycletwo {
0%  { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; } 
36% { top:0px; opacity:1; z-index:0; } 
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }  
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0%  { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; } 
56% { top:0px; opacity:1; z-index:0; } 
60% { top:325px; opacity:0; z-index:0; } 
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0%  { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0%  { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}

@keyframes cycle {
0%  { top:0px; }
4%  { top:0px; } 
16% { top:0px; opacity:1; z-index:0; } 
20% { top:325px; opacity:0; z-index:0; } 
21% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }

}
@keyframes cycletwo {
0%  { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; } 
36% { top:0px; opacity:1; z-index:0; } 
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; } 
100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes cyclethree {
0%  { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; } 
56% { top:0px; opacity:1; } 
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; } 
100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes cyclefour {
0%  { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@keyframes cyclefive {
0%  { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}

/* ANIMATION BAR */
@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  
}
@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  
}
@keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  
}
</style>

<div class='container'>
<div id='content-slider'>
    <div id='slider'>
        <div id='mask'>
        <ul>
        <li class='firstanimation' id='first'>
        <a href='http://www.blakhollywood.com/2014/10/sad-day-for-la-bamba-fans-everywhere.html'>
        <img alt='RIP'           src='http://i1239.photobucket.com/albums/ff501/basdgds/a_600x315_zpsdbf722cd.jpg'/>
        </a>
        <div class='tooltip'>
        <h1>Elizabeth Peña 09/23/59 ~ 10/16/2014</h1>
        </div>
        </li>

        <li class='secondanimation' id='second'>
        <a href='http://www.blakhollywood.com/2014/10/nick-cannon-amber-roses-so-called.html'>
        <img alt='Only Friends' src='http://i1239.photobucket.com/albums/ff501/basdgds/rsz_mgid-uma-image-mtv_zps53a1e92c.jpg'/>
        </a>
        <div class='tooltip'>
        <h1>Nick: I&#39;m Just The Manager</h1>
        </div>
        </li>

        <li class='thirdanimation' id='third'>
        <a href='http://www.blakhollywood.com/2014/09/cause-birdman-is-really-worth-it-right.html'>
        <img alt='Ke Ke n Em' src='http://i1239.photobucket.com/albums/ff501/basdgds/Kimoralee_zps6c04da83.jpg'/>
        </a>
        <div class='tooltip'>
         <h1>Over Birdman Though?</h1>
        </div>
        </li>

        <li class='fifthanimation' id='fifth'>
        <a href='http://www.blakhollywood.com/2014/09/yikes-if-you-aint-hit-then-dont-lie.html'>
        <img alt='Dont Lie to Kick It' src='http://i1239.photobucket.com/albums/ff501/basdgds/rsz_screen-shot-2014-09-22-at-102744-pm_zps8277626f.jpg'/>
        </a>
        <div class='tooltip'>
        <h1>No Tha snip He Did Not!!!</h1>
        </div>
        </li>
        </ul>
        </div>
        <div class='progress-bar'/>
    </div>
</div>

为什么这个滑块不能在IE中运行？我能够弄清楚为什么它不能在Chrome中工作而我修复了那部分，但是我无法理解为什么它在IE中不起作用。好像它不会加载图片。我会稍微玩一下，因为可能是位置问题，即图片加载在其他部分。无论如何，你们中的任何人都可以帮助我吗？ 我使用CSG networks作为测试人员。

1 个答案:

答案 0 :(得分：0)

对于进度条，您显示-moz和-webkit前缀动画，但没有其他内容。那些不在IE中工作的人。

动画在IE版本中完全不起作用。

这也是无效的HTML。

<div class='progress-bar'/>

div元素不是自动关闭的，因此您必须拥有结束标记</div>

您应验证HTML和CSS以检查其他错误。

相关问题
最新问题