图像旋转木马在不同浏览器上不正确显示

Question

这里我使用的是Flickity (来自Metafizzy插件)，它在旋转木马上发生了一些奇怪的事情。这是一个全宽度的旋转木马。我没有在旋转木马所需的js和css文件中编辑任何内容。我不使用任何css框架，只使用jquery，字体-令人敬畏和一个照明盒。

如果我试图通过本地主机查看火狐上的页面(就像往常一样)，我可以看到这 (图像应该是350 on高度)。然后，我只需按F12键打开检查器，旋转木马就会正常显示。如果我使用F5刷新页面，同样的显示问题。但是，如果我只是点击徽标名称加载index.php，旋转木马仍然显示正常。

如果我调整窗口的大小，旋转木马就会正确显示。

谷歌Chrome上也有同样的问题。

我还检查了Microsoft，旋转木马总是正确显示。

这里是旋转木马的HTML

    <div class="row" id="carousel">
        <div class="container">
            <div class="main-carousel">
              <div class="carousel-cell"><a href="img/couture/001.jpg" data-lightbox="image-1"><img src="img/couture/001.jpg" alt=""></a></div>
              <div class="carousel-cell"><a href="img/couture/002.jpg" data-lightbox="image-2"><img src="img/couture/002.jpg" alt=""></a></div>
              <div class="carousel-cell"><a href="img/couture/003.jpg" data-lightbox="image-3"><img src="img/couture/003.jpg" alt=""></a></div>
              <div class="carousel-cell"><a href="img/couture/004.jpg" data-lightbox="image-4"><img src="img/couture/004.jpg" alt=""></a></div>
              <div class="carousel-cell"><a href="img/couture/005.jpg" data-lightbox="image-5"><img src="img/couture/005.jpg" alt=""></a></div>
              <div class="carousel-cell"><a href="img/couture/006.jpg" data-lightbox="image-6"><img src="img/couture/006.jpg" alt=""></a></div>
              <div class="carousel-cell"><a href="img/couture/007.jpg" data-lightbox="image-7"><img src="img/couture/007.jpg" alt=""></a></div>
            </div>
        </div>
    </div>

及其附带的脚本

$('.main-carousel').flickity({
  cellAlign: 'left',
  contain: true,
  freeScroll: true,
  pageDots: false,
  wrapAround: true,
  autoPlay: 2500
});

CSS

#carousel{
    margin-top: 115px;
}

.main-carousel img{
    max-height: 350px;
}

@media screen and (max-width: 768px){
    #carousel{
        margin-top: 223px;
    }
}

谢谢你的帮忙

Answer 1

尝试将行添加到.main-carousel img中：

-moz-max-height: 350px;
-moz-min-height: 350px;

Answer 2

我解决了这个问题。该脚本在页面完全加载之前运行，因此我将其添加为外部函数：

$(window).on('load', function() {
    $('.main-carousel').flickity({
      cellAlign: 'left',
      contain: true,
      freeScroll: true,
      pageDots: false,
      wrapAround: true,
      autoPlay: 2500
    });
});