gpt4 book ai didi

jQuery Cycle2 图像在 Firefox 中不显示

转载 作者:行者123 更新时间:2023-12-01 01:07:18 35 4
gpt4 key购买 nike

我创建了第 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 中正确显示此内容,我将不胜感激。

谢谢。

最佳答案

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

关于jQuery Cycle2 图像在 Firefox 中不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23483213/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com