轮播在IE11中响应，但在边缘或Chrome中不响应
轮播在IE11中响应，但在边缘或Chrome中不响应
提问于 2016-09-07 05:04:32
轮播在边缘或Chrome中不响应，但在IE11中仍然响应的任何原因。旋转木马本身遵循响应式设计，并对窗口大小的变化做出反应。一旦横幅放置在旋转木马上方，横幅和旋转木马都不会响应。它们的大小不会改变，而且是固定的。在IE11中，横幅和旋转木马可以根据需要随窗口大小调整大小。
owlCarousel版本为2.1.6
$('.owl-carousel-1').owlCarousel({
loop:true,
margin:10,
navText:['<','>'],
autoplay:false,
autoplaySpeed:1000,
autoplayHoverPause:false,
responsiveClass:true,
responsiveBaseElement:window,
responsiveRefreshRate:100,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:2,
nav:true
},
1000:{
items:3,
nav:true
}
}
});回答 1
Stack Overflow用户
发布于 2016-09-08 03:41:16
显然，问题在于carousel位于flex box的div中。一旦我给了div width:100%，它就开始响应并很好地调整大小。宽度: IE不需要100%。
这在Edge，Chrome中起作用(内联样式仅用于演示)：
<div id="content">
<div class="Grid Grid--gutters Grid--holly-grail" style="display:flex">
<div class="Grid-cell main" style="width: 100%;">
<div class="article-box">
<div id="article">
<section id="intro-carousel">
<div class="owl-carousel owl-loaded owl-drag" id="intro-banner-carousel">
</div>
</section>
</div>
</div>
</div>
<div class="Grid-cell aside aside-2" id="right-column">
<div id="action-links">
</div>
<div class="article-box Demo2 Holly2" id="contact-details">
</div>
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39357818
复制相关文章
相似问题
腾讯云开发者
