图像和进度栏未在Internet Explorer中加载，但在Firefox，Chrome等中加载

Question

I am using the latest IE, Firefox and chrome. When I am running my php code on my local server or even my main server. The images in the content slider & the progress bar doesn't load in Internet explorer alone. It shows up as a black image. Below is the code for my content slider and its css.

I have looked for solutions everywhere and don't seem to find the problem in my code. I have even checked that my images which are jpg are in the RGB format, which some people have faced before.

</div>
<!--slider for news-->
<div class="container">
<div id="content-slider">
<div id="slider">
    <div id="mask">
    <ul>
    <li id="first" class="firstanimation">
    <a href="#">
    <img src="login/images/images1.jpg" alt="news1"/>
    </a>
    </li>

    <li id="second" class="secondanimation">
    <a href="#">
    <img src="login/images/images2.jpg" alt="news2"/>
    </a>
    </li>

    <li id="third" class="thirdanimation">
    <a href="#">
    <img src="login/images/images3.jpg" alt="news3"/>
    </a>
    </li>

    <li id="fourth" class="fourthanimation">
    <a href="#">
    <img src="login/images/images4.jpg" alt="news4"/>
    </a>
    </li>

    <li id="fifth" class="fifthanimation">
    <a href="#">
    <img src="login/images/images5.jpg" alt="news5"/>
    </a>
    </li>
    </ul>
    </div>
    <div class="progress-bar"></div>
    </div>
</div>

The css for the above is as given below.

/* LAYOUT */
.container {
margin:0 auto;
overflow:hidden;
width:960px;
}

/* CONTENT SLIDER */
#content-slider {
width:auto;
height:220px; /* 360px*/
margin:10px auto 0;
}
/* SLIDER */
#slider {
background:#000;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:193px;
width:155px;
margin:40px auto 0;
overflow:visible;
position:absolute;
top:150px;
left:800px;
float:right;
}
#mask {
overflow:hidden;
height:320px;
}
#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 25s linear infinite;   
-webkit-animation:cycle 25s linear infinite;        
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;     
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;       
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;        
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;        
}
#slider:hover li, 
#slider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}

/* PROGRESS BAR */
.progress-bar { 
position:relative;
top:-5px;
width:680px; 
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}

Answer 1

You've not mentioned Keyframes you're using for animation. And also you've written animation property for two browsers only.

#slider li.firstanimation {
   -moz-animation:cycle 25s linear infinite;   /* This is Firefox prefix*/
   -webkit-animation:cycle 25s linear infinite;  /* This is Chrome/Opera prefix*/
}

IE don't understand above prefixes so add

#slider li.firstanimation {
   -moz-animation:cycle 25s linear infinite;   /* This is Firefox prefix*/
   -webkit-animation:cycle 25s linear infinite;  /* This is Chrome/Opera prefix*/
   animation:cycle 25s linear infinite; /* for IE */
}

Now what I can assume here is that animation is not happening due to prefix problem and your images are not being displayed. Please update you question with more details and add fiddle.

Answer 2

Additionally added the following then only it works

animation: fullexpand 10s ease-out infinite;  
@keyframes fullexpand {
    0% {
        width: 0px;}
    100% {
        width: 100%;};
}