为什么我的滑块在 Firefox 中显示不正确？

Question

我页面顶部的滑块在 Chrome 中确实显示完美，但在 Firefox 中却没有。我该如何解决这个问题？

我已经上传了一个页面测试，以防你想看看。

页面测试：http://www.s4ea.org/new/index.html

HTML：

<header class="header2">
    <header class="second">
        <div class="top_slider">
            <div id="slider" class="aslider" data-duration="10" data-hide-controls>
             <div class="aslide" data-duration="4" data-audio="assets/audio/Acoustic-Josh-10248_hifi.mp3" data-audio-loop>
                <img src="https://lh6.googleusercontent.com/-kKIX7Bbp10U/UwlakWBTzII/AAAAAAAA1iU/FoYSNulL4Oo/s720/IMG_0003.JPG" />
             </div>   
            <div class="aslide" data-duration="5" data-audio="assets/audio/Country_-Adrien_G-8614_hifi.mp3">
                <img src="https://lh3.googleusercontent.com/-yRjbRGF3V5Q/UwlauwWKw-I/AAAAAAAA1jE/8EiHF1C5bvc/s720/IMG_0009.JPG" />
            </div>   
            <div class="aslide" data-duration="6" data-audio="assets/audio/Driving_-SpoonZ-9705_hifi.mp3">
                <img src="https://lh4.googleusercontent.com/-I0BvWvxsYos/Uwla55SXfeI/AAAAAAAA1j8/nH4M26dUtdw/s720/IMG_0016.JPG" />
            </div>    
            <div class="aslide" data-duration="7" data-audio="assets/audio/I_Wouldn-duh-8326_hifi.mp3">
                <img src="https://lh3.googleusercontent.com/-1OPZWOsQxTQ/UwlbHV7w9tI/AAAAAAAA1k0/FHocKwEtNuQ/s720/IMG_0023.JPG" />
            </div> 
        </div>
        </div>
        <div class="logo">
             <img src="http://www.s4ea.org/images/logor.jpg" width="100%" height="auto">
        </div>
         <div class="right">
             <a href="http://www.s4ea.org/images/docs&maps/CALENDAR.pdf"><img src="http://www.s4ea.org/images/register3.jpg" height="100%" width="auto" /></a>
        </div>
    </header>
</header> 

CSS：

.ul {
    width:50%;
    list-style:none;
    display:inline;
    background-color:#FFF;
}

.ul li {
    display: inline;
    background-color:#FFF;
}

.second .top_slider {
    width:40%;
    background-color: #FFF;
    float:left;
}

.second .top_slider .aslide {
    display: none;
}
.second .top_slider .aslide img {
    max-width: 100%;
    height:auto;             
}

.second .top_slider #slider {
    width: 100%;
    height: 600px;
}

.second .top_slider .aslide .text {
    width: 200px;
    margin: 0 auto;
    color: #f8f8f8;
    text-shadow: 0 0 2px #000;
    font-weight: bold;
    font-size: 36px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 30px;
    font-family: sans-serif;
}

.second .logo {
    width: 26.7%;
    background-color: #FFF;
    float:left;
    padding-left:3.3%;

}

.second .right {
    width:26.7%;
    background-color: #FFF;
    float:left;
    overflow:hidden;
    font-size:1em;
    height:100%;
    padding:0% 0% 0% 3.3%;
}

.second .right img {
    margin:0px 0px 0px 0px;
    width:100%;
    height:auto;
}

.second .right ul li{
    list-style:none;    
    line-height:0px;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}

.second .right ul {
    list-style:none;    
    line-height:0px;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}

.second .right ul li img{
    list-style:none;    
    line-height:0px;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    height: 20%;
    padding-top:5%;
    width:auto;
}

Answer 1

几个问题

.second .top_slider .aslide img {
    width: 100%;
    height:auto;             
}

.mainheader nav {
    background-color: #FFFFFF;
    float: left;
    height: 10%;
    width: 100%;
}

似乎图像的宽度不正确，因为您没有设置宽度并且您的导航只需要一个浮动清除。我通过使它成为浮动来清除它，但还有很多其他方法可以做到这一点