我用这篇文章中的纯css代码让我的旋转木马褪色。问题表明，有没有办法让它在IE9中淡出？似乎normalizr不适合我做这项工作，它应该这样做吗？我搜索过渡后退，没有发现任何我看到当我再次看现代化它有它。我不太明白旋转木马是如何工作的所以我可以接近为什么当我有IE9时，exacly没有得到jquery替换。我该怎么做？
Can the Twitter Bootstrap Carousel plugin fade in and out on slide transition
CSS
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
-moz-transition: opacity ease-in-out 1.5s;
-o-transition: opacity ease-in-out 1.5s;
-webkit-transition: opacity ease-in-out 1.5s;
transition: opacity ease-in-out 1.5s;
left: 0 !important;
opacity: 0;
top: 0;
position: absolute;
width: 100%;
display: block !important;
z-index: 100;
}
.carousel.fade .item:first-child {
top: auto;
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
-moz-transition: opacity ease-in-out 1.5s;
-o-transition: opacity ease-in-out 1.5s;
-webkit-transition: opacity ease-in-out 1.5s;
transition: opacity ease-in-out 1.5s;
z-index: 200;
}
HTML
<div class="crsl-wrap">
<div id="shop-crsl-1" class="carousel slide carousel-fade shop-crsl hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Casual Suit</h5>
<h5 class="main-text-color">$199.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Night Suit</h5>
<h5 class="main-text-color">$249.99</h5>
</div>
<div class="rating">
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Elegant Suit</h5>
<h5 class="main-text-color">$149.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-1.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Casual Suit</h5>
<h5 class="main-text-color">$199.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-2.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Night Suit</h5>
<h5 class="main-text-color">$249.99</h5>
</div>
<div class="rating">
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="shop-col-item">
<div class="photo">
<img src="images/sc/shop-crsl-3.png" class="img-responsive" alt="a">
</div>
<div class="info">
<div>
<div class="price">
<h5>Super-Elegant Suit</h5>
<h5 class="main-text-color">$149.99</h5>
</div>
<div class="rating">
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="main-text-color fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="btns clear-left">
<p class="btn-add"><i class="fa fa-shopping-cart"></i><a href="#">Add to cart</a></p>
<p class="btn-details"><i class="fa fa-list"></i><a href="#">More details</a></p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<div class="controls">
<a class="left fa fa-chevron-left" href="#shop-crsl-1" data-slide="prev"> </a>
<a class="right fa fa-chevron-right" href="#shop-crsl-1" data-slide="next"> </a>
</div>
</div>