CarouselはIE11では反応しますが、EdgeやChromeでは反応しません。

Question

EdgeやChromeではカルーセルが反応しませんが、IE11ではまだ反応しています。独自のカルーセルは応答性の高いデザインに従い、ウィンドウサイズの変化に反応します。バナーがカルーセルの上に置かれるとすぐに、バナーとカルーセルは応答しません。彼らのサイズは変わらず、修正されています。 IE11では、バナーとカルーセルはウィンドウのサイズに合わせてサイズが変更されます。

owlCarousel版はどうやら問題は、カルーセルは、フレックスボックスの内側のdiv内であったということでした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の幅を与えた：100％、それは応答とうまくリサイズを開始した。幅：100％はIEでは必要ありませんでした。

<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>