IE11 忽略溢出：在 css 转换期间隐藏

Question

http://codepen.io/anon/pen/dpyLOE - 当轮播移动时，上一张和下一张幻灯片可见。

$(".owl-carousel").owlCarousel({
  loop: true,
  autoplay: true,
  items: 1,
  nav: true,
  autoplayHoverPause: true,
  animateOut: 'slideOutUp',
  animateIn: 'slideInUp'
});

.owl-carousel {
  max-width: 320px;
}
.owl-carousel .owl-nav {
  padding-top: .4em;
  font-family: sans-serif;
  font-size: .8em;
}
.owl-carousel .owl-nav > div {
  padding: .4em 1.4em;
  border: 1px solid #333;
  background: #000;
  color: white;
  border-radius: .4em;
  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
  box-shadow: 0.1em 0.1em 0.4em rgba(0, 0, 0, 0.5);
}
.owl-carousel .owl-nav > div:hover {
  background-color: #333;
}
.owl-carousel .owl-nav .owl-prev {
  float: left;
}
.owl-carousel .owl-nav .owl-next {
  float: right;
}

.hidden-container {
  perspective: 1000px;
  border: 1px solid red;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.js"></script>
<div class="hidden-container">
  
<div class="owl-carousel">
  <img src="http://placehold.it/320x240?text=Slide%200">
  <img src="http://placehold.it/320x240?text=Slide%201">
  <img src="http://placehold.it/320x240?text=Slide%202">
  <img src="http://placehold.it/320x240?text=Slide%203">
</div>
  
</div>

我尝试添加到容器中：

perspective: 1000px;
border: 1px solid red;
position: relative;
z-index: 10;

这些似乎都不起作用。

Answer 1

您必须将overflow:hidden 添加到.owl-stage。

.owl-carousel .owl-stage {
  overflow: hidden;
}

$(".owl-carousel").owlCarousel({
  loop: true,
  autoplay: true,
  items: 1,
  nav: true,
  autoplayHoverPause: true,
  animateOut: 'slideOutUp',
  animateIn: 'slideInUp'
});

.owl-carousel {
  max-width: 320px;
}
.owl-carousel .owl-stage {
  overflow: hidden;
}
.owl-carousel .owl-nav {
  padding-top: .4em;
  font-family: sans-serif;
  font-size: .8em;
}
.owl-carousel .owl-nav > div {
  padding: .4em 1.4em;
  border: 1px solid #333;
  background: #000;
  color: white;
  border-radius: .4em;
  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
  box-shadow: 0.1em 0.1em 0.4em rgba(0, 0, 0, 0.5);
}
.owl-carousel .owl-nav > div:hover {
  background-color: #333;
}
.owl-carousel .owl-nav .owl-prev {
  float: left;
}
.owl-carousel .owl-nav .owl-next {
  float: right;
}

.hidden-container {
  perspective: 1000px;
  border: 1px solid red;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.js"></script>
<div class="hidden-container">
  
<div class="owl-carousel">
  <img src="http://placehold.it/320x240?text=Slide%200">
  <img src="http://placehold.it/320x240?text=Slide%201">
  <img src="http://placehold.it/320x240?text=Slide%202">
  <img src="http://placehold.it/320x240?text=Slide%203">
</div>
  
</div>

Answer 2

就我而言，我必须应用两个更改：

.owl-stage {
    overflow: hidden !important;
}
.owl-stage-outer {
    overflow: visible !important;
}