jssor滑動不適用於所有瀏覽器

Question

我正在使用jssor滑塊的完整版本。它適用於除IE 11以外的其他所有瀏覽器。當我嘗試調試它時，我發現控制檯中出現「堆棧錯誤」錯誤。我採取了以下鏈接中建議的措施，但是無濟於事。想法？

Jssor slider 100% width

Jssor slider doesn't work when using IE

Jssor Slider not working internet explorer

我的結構看起來是什麼問題是像下面

個調用腳本像下面

<script type="text/javascript" src="js/jssor.slider.mini.js" ></script> 

<script type="text/javascript" src="js/jssor.slider.debug.js" > </script> 

的HTML結構看起來像下面

<div id="slider-bar"> 
    <!-- #region Jssor Slider Begin --> 
    <!-- Generated by Jssor Slider Maker Online. --> 
    <!-- This demo works with jquery library --> 
    <!-- use jssor.slider.debug.js instead for debug --> 
    <script>//<![CDATA[ 
     jQuery(document).ready(function ($) { 

      var jssor_1_SlideoTransitions = [ 
       [{b:5500.0,d:3000.0,o:-1.0,r:240.0,e:{r:2.0}}], 
       [{b:-1.0,d:1.0,o:-1.0,c:{x:51.0,t:-51.0}},{b:0.0,d:1000.0,o:1.0,c:{x:-51.0,t:51.0},e:{o:7.0,c:{x:7.0,t:7.0}}}], 
       [{b:-1.0,d:1.0,o:-1.0,sX:9.0,sY:9.0},{b:1000.0,d:1000.0,o:1.0,sX:-9.0,sY:-9.0,e:{sX:2.0,sY:2.0}}], 
       [{b:-1.0,d:1.0,o:-1.0,r:-180.0,sX:9.0,sY:9.0},{b:2000.0,d:1000.0,o:1.0,r:180.0,sX:-9.0,sY:-9.0,e:{r:2.0,sX:2.0,sY:2.0}}], 
       [{b:-1.0,d:1.0,o:-1.0},{b:3000.0,d:2000.0,y:180.0,o:1.0,e:{y:16.0}}], 
       [{b:-1.0,d:1.0,o:-1.0,r:-150.0},{b:7500.0,d:1600.0,o:1.0,r:150.0,e:{r:3.0}}], 
       [{b:10000.0,d:2000.0,x:-379.0,e:{x:7.0}}], 
       [{b:10000.0,d:2000.0,x:-379.0,e:{x:7.0}}], 
       [{b:-1.0,d:1.0,o:-1.0,r:288.0,sX:9.0,sY:9.0},{b:9100.0,d:900.0,x:-1400.0,y:-660.0,o:1.0,r:-288.0,sX:-9.0,sY:-9.0,e:{r:6.0}},{b:10000.0,d:1600.0,x:-200.0,o:-1.0,e:{x:16.0}}] 
      ]; 

      var jssor_1_options = { 
       $AutoPlay: true, 
       $SlideDuration: 600, 
       $SlideEasing: $Jease$.$OutQuint, 
       $CaptionSliderOptions: { 
       $Class: $JssorCaptionSlideo$, 
       $Transitions: jssor_1_SlideoTransitions, 
       $Duration:900,x:-0.6,y:0.6, 
       }, 
       $ArrowNavigatorOptions: { 
       $Class: $JssorArrowNavigator$ 
       }, 
       $BulletNavigatorOptions: { 
       $Class: $JssorBulletNavigator$ 

       } 
      }; 

      var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options); 

      //responsive code begin 
      //you can remove responsive code if you don't want the slider scales while window resizes 
      function ScaleSlider() { 
       var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth; 
       if (refSize) { 
        refSize = Math.min(refSize, 1920); 
        jssor_1_slider.$ScaleWidth(refSize); 
       } 
       else { 
        window.setTimeout(ScaleSlider, 30); 
       } 
      } 
      ScaleSlider(); 
      $(window).bind("load", ScaleSlider); 
      $(window).bind("resize", ScaleSlider); 
      $(window).bind("orientationchange", ScaleSlider); 
      //responsive code end 
     }); 

        //]]> 
        </script> 
    <div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;"> 
    <!-- Loading Screen --> 
    <div data-u="loading" style="position: absolute; top: 0px; left: 0px;"> 
     <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"> </div> 
     <div style="position:absolute;display:block;background:url('2016-Website/img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"> </div> 
    </div> 
    <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;"> 
     <div class="blurDiv" data-p="225.00" style="display: none;"> <a href="#"> </a> <img data-u="image" src="img/the-image.jpg" /> 
     <div u="caption" data-t="01" class="caption"> 
      <h1>The title <br /> 
      <div class="subTitle blueOne">Title </div> 
      </h1> 
     </div> 
     </div> 
     <div class="blurDiv" data-p="225.00" style="display: none;"> <a href="#"> </a> <img data-u="image" src="img/img/the-image.jpg" /> 
     <div u="caption" data-t="01" class="caption"> 
      <h1>Title <br /> 
      <div class="subTitle blue">Now Available </div> 
      </h1> 
     </div> 
     </div> 
     <!-- Bullet Navigator --> 
     <div data-u="navigator" class="jssorb05" style="bottom:16px;" data-autocenter="1"> 
     <!-- bullet navigator item prototype --> 
     <div data-u="prototype" style="width:16px;height:16px;"> </div> 
     </div> 
     <!-- Arrow Navigator --> 
     <span data-u="arrowleft" class="jssora22l" style="left:12px;width:40px;height:58px;" data-autocenter="2"> </span> <span data-u="arrowright" class="jssora22r" style="right:12px;width:40px;height:58px;" data-autocenter="2"> </span> <a href="https://www.jssor.com" style="display:none">Jssor Slider </a> </div> 
    <!-- #endregion Jssor Slider End --> 
    </div> 
</div> 

Answer 1

下面的CSS代碼塊是所有我需要強制問題的元件採取全寬度的父母，並解決了這個問題。

#jssor_1 > div div div { 
    width: 100%!important; 
}