jssor 滑块在 IE 中缺少内容但在 Chrome 中正常

Question

我使用 jssor 创建了一个简单的滑块，它在 Chrome 中运行良好。但是，当我在 IE 11 中查看同一张幻灯片时，文本丢失（但背景图像存在）。

谁能告诉我这段代码有什么问题 - 为什么文本不显示在 IE 11 中？当我使用 IE 访问 jssor.com 网站时，演示工作正常。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="/include/jquery/slider-master/js/jssor.slider.mini.js"></script>
  </head>
  <body>
    <div id="content">
      <div id="panel_topslider" style="position: relative; top: 0px; left: 0px; width: 500px; height: 350px;">
        <div data-u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 500px; height: 350px;">
          <div>
            <img data-u="image" src="/images/banners/911-call-center.jpg" alt="911 call center"/>
            <div style="color:white;font-size:200%;">THIS TEXT DOES NOT SHOW UP IN IE 11</div>
          </div>
        </div>
      </div>
    </div>
    <script>
      jQuery(document).ready(function ($) {
        options = { $AutoPlay: true, $FillMode: 1, $AutoPlayInterval: 8000 };   
        valueobject = new $JssorSlider$('panel_topslider', options);
      });
    </script>
  </body>
</html>

Answer 1

请为元素指定 position、top 和 left。

<div style="position: absolute; top: 0px; left: 0px; color:white;font-size:200%;">THIS TEXT WILL SHOW UP IN IE 11</div>

jssor 滑块在 IE 中缺少内容但在 Chrome 中正常

jssor slider missing content in IE but ok in Chrome

jquery

slider

jssor