owl-carousel - Carousel 在 IE11 中响应，但在 Edge 或 Chrome 中不响应

Question

轮播在 Edge 或 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
                        }
                    }
                });

Answer 1

显然问题在于轮播位于弹性盒子内的 div 内。一旦我给了 div width:100%，它就开始很好地响应和调整大小。IE 不需要 width: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>