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

Question

由于某种原因，这段代码只能在Chrome中找到，而不能在Firefox中找到。 我不知道为什么，所以我希望有人能帮助我。

div“ slideshow”及其内容在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中，它将无法使用[至少在较旧的浏览器中没有检查]。

看看我根据您的代码创建的这个示例 [无需更改代码，仅使用jQuery 1.9.1]，这是否解决了您的问题？

Answer 3

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

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