Question

我的旋转木马的图像没有显示，仅在Firefox和最大化浏览器时显示。我可以看到旋转木马底部的控件，它显示下一个和上一个。

Chrome和IE中的一切都很好，当你最小化Firefox浏览器时。

http://www.henschen.com/siteTemplates/2014-16/

<div id="owl-demo" class="owl-carousel owl-theme">
     <div class="item"><img src="images/slider1.png" alt="test"></div>
     <div class="item"><img src="images/slider2.png" alt="test"></div>
     <div class="item"><img src="images/slider3.png" alt="test"></div>
</div>

#owl-demo .item img {
      display: block;
      width: 100%;
      height: auto;
}

Answer 1

检查您的JS代码链接以及CSS它们是否已损坏

控制台 -

Failed to load resource: the server responded with a status of 404 (Not Found) http://www.henschen.com/siteTemplates/2014-16/css/google-code-prettify/prettify.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.henschen.com/siteTemplates/2014-16/css/google-code-prettify/prettify.js

Answer 2

我不完全确定，但我认为这是因为你没有正确关闭你的img标签。 Firefox Inspector给了我

<img alt="test" src="images/slider1.png"></img>

什么时候应该

<img alt="test" src="images/slider1.png" />

您可以尝试将代码更改为以下内容：

<div id="owl-demo" class="owl-carousel owl-theme">
 <div class="item"><img src="images/slider1.png" alt="test" /></div>
 <div class="item"><img src="images/slider2.png" alt="test" /></div>
 <div class="item"><img src="images/slider3.png" alt="test" /></div>
</div>

Answer 3

首先确保确认您没有任何取消轮播的@media定义，如果不是这样的话

寻找这个css定义 “@media all和（transform-3d），（ - webkit-transform-3d）{” 改成 “@media all和（transform-3d），（ - webkit-transform-3d），（ - moz-transform-3d）{” 一些firefox如何解决transform-3d问题也然后检查您是否有定义位置的轮播的任何CSS定义。确保取出position属性并重试。希望它适合你

旋转木马的图像没有在Firefox中显示

3 个答案: