Question

我的问题可以在这里显示：https://codepen.io/AliF50/pen/OzwKdm

<div class="container">
  <div class="row">
      <div class="col s6">
          <div class="carousel carousel-slider">
              <a class="carousel-item" href="#one!"><div class="preloader-wrapper big active">
                  <div class="spinner-layer spinner-blue-only">
                    <div class="circle-clipper left">
                      <div class="circle"></div>
                    </div><div class="gap-patch">
                      <div class="circle"></div>
                    </div><div class="circle-clipper right">
                      <div class="circle"></div>
                    </div>
                  </div>
                </div>Slide 1</a>
              <a class="carousel-item" href="#two!"><div class="preloader-wrapper big active">
                  <div class="spinner-layer spinner-blue-only">
                    <div class="circle-clipper left">
                      <div class="circle"></div>
                    </div><div class="gap-patch">
                      <div class="circle"></div>
                    </div><div class="circle-clipper right">
                      <div class="circle"></div>
                    </div>
                  </div>
                </div>Slide 2</a>
          </div>
      </div>
      <div class="col s6">
          <div class="carousel carousel-slider">
              <a class="carousel-item" href="#one!"><div class="preloader-wrapper big active">
                  <div class="spinner-layer spinner-blue-only">
                    <div class="circle-clipper left">
                      <div class="circle"></div>
                    </div><div class="gap-patch">
                      <div class="circle"></div>
                    </div><div class="circle-clipper right">
                      <div class="circle"></div>
                    </div>
                  </div>
                </div>Slide 1</a>
              <a class="carousel-item" href="#two!"><div class="preloader-wrapper big active">
                  <div class="spinner-layer spinner-blue-only">
                    <div class="circle-clipper left">
                      <div class="circle"></div>
                    </div><div class="gap-patch">
                      <div class="circle"></div>
                    </div><div class="circle-clipper right">
                      <div class="circle"></div>
                    </div>
                  </div>
                </div>Slide 2</a>
          </div>
      </div>
  </div>
</div>

在谷歌浏览器中，它完美无缺。在Internet Explorer中，隐藏的轮播幻灯片的加载微调器仍然显示在屏幕上。奇怪的是，在Internet Explorer中切换到新选项卡，然后返回到此选项卡，额外的微调器就会消失。幻灯片1和幻灯片2的文本虽然消失了，但旋转器并没有消失。

有关在Internet Explorer中可能导致此问题的任何想法吗？

Answer 1

我通过添加以下CSS来修复它。

.carousel-item:not(.active){
visibility: hidden;

}

https://codepen.io/AliF50/pen/OzwKdm

旋转装载机中的旋转装载机MaterialiseCSS

1 个答案: