Question

我注意到自从我实施JJSOR滑块以来的最后一年，使用IE进行的一些更新已经在许多浏览器中破坏了它。在chrome中仍然很好用，但是在IE中，补间的div层会分成碎片（每次都不同）。

这是我的最新代码：

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>

<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<!-- Source: https://www.jssor.com -->
<script src="js/jssor.slider-27.0.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jssor_1_slider_init = function() {

        var jssor_1_SlideoTransitions = [
          [{b:0,d:600,y:-244,e:{y:27}}],
          [{b:0,d:600,x:1156,e:{x:27}}],
          [{b:-1,d:1,o:-1},{b:0,d:600,o:1,e:{o:5}}],
          [{b:0,d:1000,y:116}]
        ];

        var jssor_1_options = {
          $AutoPlay: 1,
          $Idle: 6000,
          $FillMode: 4,
          $Cols: 1,
          $Align: 0,
          $CaptionSliderOptions: {
            $Class: $JssorCaptionSlideo$,
            $Transitions: jssor_1_SlideoTransitions
          },
          $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
          },
          $BulletNavigatorOptions: {
            $Class: $JssorBulletNavigator$
          }
        };

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

        /*#region responsive code begin*/

        var MAX_WIDTH = 1200;

        function ScaleSlider() {
            var containerElement = jssor_1_slider.$Elmt.parentNode;
            var containerWidth = containerElement.clientWidth;

            if (containerWidth) {

                var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

                jssor_1_slider.$ScaleWidth(expectedWidth);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }

        ScaleSlider();

        $Jssor$.$AddEvent(window, "load", ScaleSlider);
        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
        /*#endregion responsive code end*/
    };
</script>
<style>
    /* jssor slider bullet navigator skin 01 css */
    /*
    .jssorb01 div           (normal)
    .jssorb01 div:hover     (normal mouseover)
    .jssorb01 .av           (active)
    .jssorb01 .av:hover     (active mouseover)
    .jssorb01 .dn           (mousedown)
    */
    .jssorb01 {
        position: absolute;
    }
    .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
        position: absolute;
        /* size of bullet elment */
        width: 12px;
        height: 12px;
        filter: alpha(opacity=70);
        opacity: .7;
        overflow: hidden;
        cursor: pointer;
        border: #000 1px solid;
    }
    .jssorb01 div { background-color: gray; }
    .jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
    .jssorb01 .av { background-color: #fff; }
    .jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }

    /* jssor slider arrow navigator skin 03 css */
    /*
    .jssora03l                  (normal)
    .jssora03r                  (normal)
    .jssora03l:hover            (normal mouseover)
    .jssora03r:hover            (normal mouseover)
    .jssora03l.jssora03ldn      (mousedown)
    .jssora03r.jssora03rdn      (mousedown)
    */
    .jssora03l, .jssora03r {
        display: block;
        position: absolute;
        /* size of arrow element */
        width: 55px;
        height: 55px;
        cursor: pointer;
        background: url('img/a03.png') no-repeat;
        overflow: hidden;
    }
    .jssora03l { background-position: -3px -33px; }
    .jssora03r { background-position: -63px -33px; }
    .jssora03l:hover { background-position: -123px -33px; }
    .jssora03r:hover { background-position: -183px -33px; }
    .jssora03l.jssora03ldn { background-position: -243px -33px; }
    .jssora03r.jssora03rdn { background-position: -303px -33px; }
</style>

<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1200px;height:444px;overflow:hidden;visibility:hidden;">
    <!-- Loading Screen -->
    <div data-u="loading" style="position:absolute;top:0px;left:0px;background-color:rgba(0,0,0,0.7);">
        <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('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:1200px;height:444px;overflow:hidden;">
        <div data-p="205.50">
            <img data-u="image" src="img/002.jpg" />
            <div data-u="caption" data-t="0" style="position:absolute;top:320px;left:170px;width:350px;height:310px;background-color:rgba(187,205,255,0.2);font-size:18px;color:#0d0d0d;line-height:1.56;text-align:center;padding:8px 8px 8px 8px;box-sizing:border-box;">
               <h2><a href="burl_textures.html" class="h">First Header</a></h2>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </div>
        </div>
        <div data-p="205.50">
            <img data-u="image" src="img/003.jpg" />
            <div data-u="caption" data-t="1" style="position:absolute;top:46px;left:-380px;width:360px;height:265px;background-color:rgba(255,255,255,0.5);font-size:18px;color:#303030;line-height:1.56;text-align:center;padding:8px 8px 8px 8px;box-sizing:border-box;">
                <h2><a href="burl_textures.html" class="h">Second Header</a></h2>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </div>
        </div>
        <div data-p="205.50">
            <img data-u="image" src="img/004.jpg" />
            <div data-u="caption" data-t="2" style="position:absolute;top:40px;left:750px;width:360px;height:265px;background-color:rgba(48,48,48,0.1);border-radius:1px;font-size:18px;color:#303030;line-height:1.56;text-align:center;padding:12px 12px 12px 12px;box-sizing:border-box;">
                <h2><a href="burl_textures.html" class="h">Third Header</a></h2>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </div>
        </div>
        <div data-p="205.50">
            <img data-u="image" src="img/007.jpg" />
            <div data-u="caption" data-t="3" style="position:absolute;top:-50px;left:56px;width:350px;height:70px;background-color:rgba(255,255,255,0.5);font-size:18px;color:#303030;line-height:1.39;text-align:center;">
                <h2>Fourth Header</h2>
            </div>
        </div>
    </div>
    <!-- Bullet Navigator -->
    <div data-u="navigator" class="jssorb01" style="bottom:12px;right:12px;">
        <div data-u="prototype" style="width:12px;height:12px;"></div>
    </div>
    <!-- Arrow Navigator -->
    <span data-u="arrowleft" class="jssora03l" style="top:0px;left:30px;width:55px;height:55px;" data-autocenter="2"></span>
    <span data-u="arrowright" class="jssora03r" style="top:0px;right:30px;width:55px;height:55px;" data-autocenter="2"></span>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>
<!-- #endregion Jssor Slider End -->

以下是我得到的奇怪结果的一些例子。我很确定这与IE浏览器的流体对象渲染效果不佳有关，但我已经尝试了解决这个问题的所有方法并且无法解决问题。

我非常感谢对此的任何想法。感谢。

图层在IE中渲染不正确

0 个答案: