CSS幻灯片无法在其他浏览器中使用

Question

我一直在我的网站上使用简单的CSS / HTML幻灯片。它在Chrome上很棒，直到我在IE8上浏览了我的网站。一些CSS没有工作，幻灯片显示被打破，所有照片堆叠在一起。使我的CSS与所有浏览器兼容的最佳方法是什么？

HTML：

<div class="css-slideshow" id="container">
<figure><img alt="Air Compressor" height="370" src="images/air-compressor.jpg" width="495" /> <figcaption><strong>Air Compressor</strong>      </figcaption></figure>

<figure><img alt=" Battery Charger" height="370" src="images/battery-charger.jpg" width="495" /> <figcaption><strong>Battery Charger</strong> </figcaption></figure>

<figure><img alt="Engine Hoist" height="370" src="images/engine-hoist.jpg" width="495" /> <figcaption><strong>Engine Hoist</strong> </figcaption></figure>

<figure><img alt="Floor Jack" height="370" src="images/floor-jack.jpg" width="495" /> <figcaption><strong>Floor Jack</strong></figcaption></figure>

<figure><img alt="Jumper Cables" height="370" src="images/jumper-cables.jpg" width="495" /> <figcaption><strong>Jumper Cables</strong></figcaption></figure>

<figure><img alt="Air Impact Wrench" height="370" src="images/air-impact-wrench.jpg" width="495" /> <figcaption><strong>Air Impact Wrench</strong></figcaption></figure>

<figure><img alt=" Car Stand" height="370" src="images/car-stand.jpg" width="495" /> <figcaption><strong>Car Stand</strong></figcaption></figure>

<figure><img alt="Dewalt Impact Wrench" height="370" src="images/dewalt-impact-wrench.jpg" width="495" /> <figcaption><strong>Dewalt Impact Wrench</strong></figcaption></figure>

CSS：

.css-slideshow{
 display: block;
 position: relative;
 max-width: 495px;
 height: 370px;
 margin: 0em auto;
 width:75%;
 }
.css-slideshow figure{
 margin: 0;
 position: absolute;
 }

.css-slideshow img {
 box-shadow: 0 0 2px #666;}

.css-slideshow figcaption{
 position: absolute;
 top: 0;
 color: #fff;
 background: rgba(0,0,0, .3);
 font-size: .8em;
 padding: 8px 12px;
 opacity: 0;
 transition: opacity .5s;
  }
.css-slideshow:hover figure figcaption{
 transition: opacity .5s;
 opacity: 1;
 }
.css-slideshow figure{
 opacity:0;
 }
 figure:nth-child(1) {
 animation: xfade 48s 0s infinite;
 }
 figure:nth-child(2) {
 animation: xfade 48s 6s infinite;
 }
 figure:nth-child(3) {
 animation: xfade 48s 12s infinite;
 }
 figure:nth-child(4) {
 animation: xfade 48s 18s infinite;
 }
 figure:nth-child(5) {
 animation: xfade 48s 24s infinite;
 }
 figure:nth-child(6) {
 animation: xfade 48s 30s infinite;
 }
 figure:nth-child(7) {
 animation: xfade 48s 36s infinite;
 }
 figure:nth-child(8) {
 animation: xfade 48s 42s infinite;
 }

@keyframes xfade{
  0%{
  opacity: 1;
 }
  10.5% {
  opacity:1;
 }
  12.5%{
  opacity: 0;
 }
  98% {
  opacity:0;
 }
   100% {
  opacity:1;
 }
 }

#container {
display: flex;              /* establish flex container */
flex-direction: column;     /* stack flex items vertically */
justify-content: center;    /* center items vertically, in this case */
align-items: center;        /* center items horizontally, in this case */
height: 370px;
}