我已经找到了如何让这个翻转动画在IE中运行的死胡同。 HTML和CSS如下。现场演示在http://designatwork.net/precision/。它在Chrome和FF中运行良好，但在IE中，特别是10/11版本给我带来了地狱。对修补程序的任何想法都会使它在所有浏览器中保持一致吗？
<div class="row hidden-xs">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="row">
<div class="col-md-4 min-gutter">
<div class="home-box-1">
<p>Collections and billing are vital elements of any successful practice, but they're not the reason you got in to medicine. Refocus your efforts on patient care and <b>get back to what matters</b> with Precision Medical Billing (PMB).</p>
</div>
</div>
<div class="col-md-3 min-gutter">
<div class="row full-gutter">
<div class="col-md-6 min-gutter">
<div class="home-box-2" ontouchstart="this.classList.toggle('hover');">
<div class="flip-container">
<div class="flipper">
<div class="front">
<a href="http://designatwork.net/precision/services/physicians-services/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/10/hb2-front.jpg" width="95" height="110" alt=""></a>
</div>
<div class="back">
<a href="http://designatwork.net/precision/services/physicians-services/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/10/hb2-back.jpg" width="95" height="110" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 min-gutter">
<div class="home-box-3" ontouchstart="this.classList.toggle('hover');">
<div class="flip-container">
<div class="flipper">
<div class="front">
<a href="http://designatwork.net/precision/services/physicians-services/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/10/hb3-front.jpg" width="95" height="110" alt=""></a>
</div>
<div class="back">
<a href="http://designatwork.net/precision/services/physicians-services/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/11/hb3-back4.jpg" width="95" height="110" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row full-gutter">
<div class="col-md-12 min-gutter">
<div class="home-box-4" ontouchstart="this.classList.toggle('hover');">
<div class="flip-container">
<div class="flipper">
<div class="front">
<a href="http://designatwork.net/precision/services/home-health-hospice-care-providers/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/10/hb4-front.jpg" width="200" height="95" alt=""></a>
</div>
<div class="back">
<a href="http://designatwork.net/precision/services/home-health-hospice-care-providers/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/10/hb4-back.jpg" width="200" height="95" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 min-gutter">
<div class="home-box-5" ontouchstart="this.classList.toggle('hover');">
<div class="flip-container">
<div class="flipper">
<div class="front">
<a href="http://designatwork.net/precision/training/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/10/hb5-front.png" width="200" height="215" alt=""></a>
</div>
<div class="back">
<div class="home-box-5-back">
<p>Webinars and<br />on-demand videos</p>
<p><a href="http://designatwork.net/precision/training/"><i class="fa fa-plus"></i><br />Physicians »</a></p>
<p><a href="http://designatwork.net/precision/training/"><i class="fa fa-plus"></i><br />Home Health & Hospice Care Providers »</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 min-gutter">
<div class="home-box-6" ontouchstart="this.classList.toggle('hover');">
<div class="flip-container">
<div class="flipper">
<div class="front">
<a href=""><img src="http://designatwork.net/precision/wp-content/uploads/2015/10/hb6-front.png" width="129" height="215" alt=""></a>
</div>
<div class="back">
<div class="home-box-6-back">
<p>Valuable tools<br />and information<br />to improve your<br />day-to-day</p>
<p><a href="http://designatwork.net/precision/resources/physicians-resources/"><i class="fa fa-plus"></i> Physicians »</a></p>
<p><a href="http://designatwork.net/precision/resources/home-health-hospice-resources/"><i class="fa fa-plus"></i> Home Health & Hospice Care Providers »</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row middle-row">
<div class="col-md-5 min-gutter">
<div class="home-box-7">
<p>Request your free<br />consultation</p>
<a href="#consultation" data-toggle="modal" data-target="#consultation">Get Started</a>
</div>
</div>
<div class="col-md-7 min-gutter">
<div class="home-box-8">
<img src="http://designatwork.net/precision/wp-content/uploads/2015/11/involved-active2.png" width="480" height="204" alt="">
</div>
</div>
</div>
<div class="row middle-row">
<div class="col-md-7 min-gutter">
<div class="home-box-9" ontouchstart="this.classList.toggle('hover');">
<div class="flip-container">
<div class="flipper">
<div class="front">
<a href="http://designatwork.net/precision/news-events/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/10/hb9-front.jpg" width="485" height="100" alt=""></a>
</div>
<div class="back">
<a href="http://designatwork.net/precision/news-events/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/10/hb9-back.jpg" width="485" height="100" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 min-gutter">
<div class="home-box-10" ontouchstart="this.classList.toggle('hover');">
<div class="flip-container">
<div class="flipper">
<div class="front">
<a href="http://designatwork.net/precision/about-us/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/10/hb10-front.png" width="125" height="100" alt=""></a>
</div>
<div class="back">
<a href="http://designatwork.net/precision/about-us/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/10/hb10-back.jpg" width="125" height="100" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 min-gutter">
<div class="home-box-11" ontouchstart="this.classList.toggle('hover');">
<div class="flip-container">
<div class="flipper">
<div class="front">
<a href="http://designatwork.net/precision/contact/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/10/hb11-front.jpg" width="200" height="100" alt="contact"></a>
</div>
<div class="back">
<a href="http://designatwork.net/precision/contact/"><img src="http://designatwork.net/precision/wp-content/uploads/2015/11/hb11-back2.jpg" width="200" height="100" alt="contact"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
-webkit-perspective: 1000;
-ms-perspective: 1000;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
.flip-container:hover .back {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
transition: ease-in-out 1.0s;
-ms-transform: rotateY(180deg);
-ms-transition: ease-in-out 1.0s;
-webkit-transform: rotateY(180deg);
-webkit-transition: ease-in-out 1.0s;
}
.flip-container, .front, .back {
width: 100%;
}
/* flip speed goes here */
.flipper {
transition: 1.0s;
-ms-transition: 1.0s;
-webkit-transition: 1.0s;
transform-style: preserve-3d;
-ms-transform-style: preverve-3d;
-webkit-transform-style: preverve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: 1.0s;
-webkit-transition: 1.0s;
-ms-transition: 1.0s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transition: ease-in-out 1.0s;
-ms-transition: ease-in-out 1.0s;
-webkit-transition: ease-in-out 1.0s;
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transition: ease-in-out 1.0s;
-ms-transition: ease-in-out 1.0s;
-webkit-transition: ease-in-out 1.0s;
}