Question

我创建了一个循环2幻灯片here，它在Chrome和Safari中运行良好，但图片不会显示在Firefox中。

这是html：

<article id="slider" >
<div class="slide-projector container">
<div class="slide-nav">
<span id="prev"> Prev</span>
<span id="next"> Next</span>
</div>     
<div class="cycle-slideshow" data-cycle-slides="> div" data-cycle-prev="#prev" data-cycle-next="#next">


<div class="slide">
<div class="slide-link">
<a href="/estimate/">Request an Estimate</a>
</div>
<img src="/images/uploads/placeholder_slider_01.png" alt="Coastal Moving - Request an Estimate"  />
</div>

<div class="slide">
<div class="slide-link">
<a href="/planning-your-move/">Planning Your Move</a>
</div>
<img src="/images/uploads/TipstoMove.jpg" alt="Plan Your Move"  />
</div>

<div class="slide">
<div class="slide-link">
<a href="/services/strorage">Storage</a>
</div>
<img src="/images/uploads/storage1.jpg" alt="Need Storage?"  />
</div>


</div><!-- end slideshow -->
</div><!-- end slide-projector -->
</article>

这是CSS

.slide-projector { 
    max-width: 960px; 
    max-height: 322px; 
    position: relative; 
    border-bottom: 5px solid #c32538;
}


.cycle-slideshow { 
    position: relative;
    max-width: 960px; 
    height: 322px;  
    overflow: hidden;
}

.slide { max-width: 960px; }

.slide > img { 
    width: 100%; 
    position: absolute; 
    top: 0; left: 0; 
}

.slide-nav { 
    position: absolute;
    top: 5px;
    left: 10px;
    width: 80px; 
    height: 40px; 
    background: #c32538; 
    padding: 5px;
    z-index: 500; 
    border-right: 1px solid white;
}

span#prev { 
    width: 37px; 
    height: 36px; 
    display: block;
    float: left;
    padding-right: 5px;
    text-indent: -9999px;
    background: url(/resources/imgs/arrow_right.png) no-repeat left top; }

span#next { 
    width: 37px; 
    height: 36px; 
    background: url(/resources/imgs/arrow_left.png) no-repeat left top; 
    text-indent: -9999px;
    display: block;
    float: left;
    }

.slide-link { 
    width: 200px; 
    height: 30px; 
    position: absolute;
    top: 5px;
    left: 100px;
    background: #c32538; 
    padding: 10px; 
    z-index: 300;
}

.slide-link a:link,
.slide-link a:visited { color: #fff; text-decoration: none; }

如果能够在Firefox中正确显示，我将不胜感激。

谢谢。

Answer 1

将width:100%添加到.slide似乎可以解决我在Firefox 29中遇到的问题。使用max-width:960px这意味着幻灯片将尽可能宽，同时不会超过960px 。希望有所帮助：）

在Firefox中没有显示jQuery Cycle2图像

1 个答案: