Question

出于某种原因，这段代码只能在Chrome中找到，但在Firefox中找不到。我不明白为什么，所以我希望有人可以帮助我。

div“幻灯片”及其内容在Firefox中根本不显示。这就像JS甚至没有加载。

HTML

<div id="slideshow">
            <div class="slideshow_text">
                <p class="txt1">Er du klar?</p>
                <p class="txt2">til et <span>NYT</span></p>
                <p class="txt3">&</p>
                <p class="txt4">BEDRE <span>JEG</span>?</p>
            </div>
            <img id="slide_1" src="img/ss/large_slide1.jpg" alt="Woman">
            <img id="slide_2" src="img/ss/large_slide2.jpg" alt="Woman">
            <img id="slide_3" src="img/ss/large_slide3.jpg" alt="Woman">
        </div>

JS

$(document).ready(function() {
$("#slide_1").animate({left: 0}, 700);

$(".slideshow_text").slideDown("slow");

$("#slide_1").click(function() {
    $("#slide_1").animate({left: "-980px"}, 700);
    $("#slide_2").animate({left: 0}, 700);
    $("#slide_3").css("left", "980px");
});
$("#slide_2").click(function() {
    $("#slide_2").animate({left: "-980px"}, 700);
    $("#slide_3").animate({left: 0}, 700);
    $("#slide_1").css("left", "980px");
});

$("#slide_3").click(function() {
    $("#slide_3").animate({left: "-980px"}, 700);
    $("#slide_1").animate({left: 0}, 700);
    $("#slide_2").css("left", "980px");
});

});

CSS

#slideshow {
width: 980px;
height: 445px;
margin: 50px auto 25px auto;
position: relative;
overflow: hidden;
}

#slide_1, #slide_2, #slide_3 {
position: absolute;
top: 0;
left: 980px;
}

.slideshow_text {
display: none;
width: 200px;
background-color: rgba( 255, 255, 255, 0.4);
position: absolute;
top: 100px;
left: 650px;
z-index: 9;
border-radius: 4px;
padding: 15px;
}

.slideshow_text p{
float: left;
width: 100%;
color: #FFFFFF;
}

如果您需要更多详情，请与我们联系。坦率地说，我真的不知道还有什么要写的。

Answer 1

如果在图像上放置宽度和高度会有帮助吗？

#slide_1, #slide_2, #slide_3 {
position: absolute;
top: 0;
left: 980px;
height: 445px;
width: auto;
}

Answer 2

您使用的是什么版本的jQuery ？如果你使用jQuery 1.9.1它将在FireFox中工作，但是，使用jQuery 2.0.2它不会[至少用旧的浏览器检查它没有]

Check out this example I created基于您的代码[没有代码更改，仅使用jQuery 1.9.1]，这是否可以解决您的问题？

Answer 3

显然是我的“#wrapper”自我崩溃，隐藏了所有内容。

添加高度并不能解决问题，但添加边框可以解决问题并且内容会显示出来。

Javascript仅适用于Chrome，而不适用于Firefox

3 个答案: