Question

旋转木马在Edge或Chrome中没有响应但在IE11中仍然响应的任何原因。旋转木马本身遵循响应式设计，并对窗户尺寸的变化做出反应。一旦横幅放置在旋转木马上方，横幅和旋转木马都没有响应。它们的大小不会改变，而且是固定的。在IE11中，横幅和轮播根据需要调整窗口大小。

owlCarousel版本是2.1.6

$('.owl-carousel-1').owlCarousel({
                    loop:true,
                    margin:10,
                    navText:['&lt;','&gt;'],
                    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宽度：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>

Carousel在IE11中响应，但在Edge或Chrome中没有响应

1 个答案: