在 IE11 中使用 JSSOR 滑块答案

【问题标题】：Using JSSOR Slider with IE11在 IE11 中使用 JSSOR 滑块
【发布时间】：2015-06-08 10:57:21
【问题描述】：

我正在使用最新版本的 JSSOR Slider (jssor.slider.mini.js) 和 JQuery (http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js) 开发网页。

JSSOR Slider 在 Chrome 和 Firefox 上运行良好，但我在 IE11 上遇到了多个问题。

首先，滑块应该居中（在 Chrome 和 FF 中有效），但设置为向左偏。

其次，幻灯片应该通过淡入淡出进行过渡（在 Chrome 和 FF 中有效），但实际上向左滑动不会淡出。

代码如下：

<!DOCTYPE html>
<html lang="en-gb">
  <head>
    <meta charset="UTF-8">
    <title>Home</title>
    <meta name="viewport" content="width=1638">
    <link rel="Stylesheet" type="text/css" href="css/slider.css" /> 
    <!-- script type="text/javascript" src="scr/jquery-2.1.3.min.js"></script -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
    <!-- JSSOR works with all jquery version from 1.x to 2.x -->
    <script src="scr/jssor/js/jssor.slider.mini.js"></script>
    <script>

        $(document).ready(function()
        {
            //Define an array of slideshow transition code
            var _SlideshowTransitions = [
            { $Duration: 3600, $Opacity: 2 }
            ];

            var options = {
                $SlideDuration: 500,                               //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                $DragOrientation: 1,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
                $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $AutoPlayInterval: 2000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                    $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                    $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                    $TransitionsOrder: 0,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                    $PlayOrientation: 1,                            //[Optional] Direction of play, 1 horizontal, 2 vertical
                    $PauseOnHover: 3,                               //[Optional] Direction 0: no pause, 1: pause for desktop, 2: pause for touch device, 3: pause for
                                                                    //           desktop and touch device, 4: freeze for desktop, 8: freeze for touch device, 
                                                                    //           12: freeze for desktop and touch device, default value is 1
                    $ShowLink: false                                 //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
                }

            };
            var jssor_slider1 = new $JssorSlider$('SliderContainer', options);

             //this will be triggered when object is clicked
            $("#SliderCTA").click(function()
            {
                document.location.href = "main.html";
            }); 

        });      
    </script>
  </head>
    <body>
        <div style="width:100%; margin: 0 auto; text-align: center;">
            <div id="SliderContainer" class="Slider">
                <div u="slides" class="SlideContainer">
                    <div><img u="image" src="img/large-blinds/01-compressed.jpg"  alt="" />
                    </div>
                    <div><img u="image" src="img/large-blinds/06-compressed.jpg"  alt="" />
                    </div>
                    <div><img u="image" src="img/large-blinds/02-compressed.jpg"  alt="" />
                    </div>
                    <div><img u="image" src="img/large-blinds/03-compressed.jpg"  alt="" />
                    </div>
                    <div><img u="image" src="img/large-blinds/07-compressed.jpg"  alt="" />
                    </div>
                    <div><img u="image" src="img/large-blinds/04-compressed.jpg"  alt="" />
                    </div>
                    <div><img u="image" src="img/large-blinds/05-compressed.jpg"  alt="" />
                    </div>
                </div>
                <div style="position: absolute; top: 550px; left: 0px; width: 740px; height: 50px; background: #205900;display: table-cell;"></div>
                <div id="SliderCTA">Find out more ...</div>
            </div>
        </div>
    </body>
</html>

这是来自 slider.css 的相关 CSS：

.Slider
{
  margin:0px auto;
  position: absolute;
  top: 0px; 
  left: 0px; 
  bottom: 0px; 
  right: 0px;
  width: 960px; 
  height: 500px;
}

.SlideContainer
{
    position: absolute; 
    left: 0px; 
    top: 50px; 
    width: 960px; 
    height: 500px;
    cursor: move; 
    overflow: hidden;
}

我有：

将位置从绝对更改为相对，没有任何区别。
将 % 尺寸更改为固定尺寸
在所有尺寸后使用“px”
尝试了 JSSOR 中的所有选项

如果有人能指出阻止它在 IE 中正常工作的错误或遗漏，我将不胜感激。

【问题讨论】：

标签： jquery internet-explorer-11 jssor

【解决方案1】：

它在我的最后工作正常。我想你必须再检查一次。

顺便说一句，要使用margin: 0 auto;，强烈建议设置position: relative;

.Slider
{
  margin:0px auto;
  position: relative;
  ...
}

【讨论】：

我找到了答案！
IE11 仅使用进入兼容（怪癖）模式
为了让它正常工作，它需要
Jssor：感谢您的快速反馈

【解决方案2】：

答案不是JSSOR代码的问题，而是IE11的问题。

看来：

<!DOCTYPE html>

声明本身是不够的。如果没有此 IE11（和 10、9），请转到默认的怪癖模式并模拟 IE7。我发现 head 部分中的 meta 标签强制它使用最新版本模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

我会对任何 cmets 感兴趣，我希望这可以帮助其他人解决这个问题！

【讨论】：