Question

我正在建造一个工作正常的旋转木马。唯一的问题是我无法使这100％响应，它似乎在webkit浏览器中工作，但在Firefox中没有。图像大小调整很好但是li宽度保持与原始图像相同的大小，因此我的图像之间会有很大的间隙？

.carousel{
    height:100%;
}
.carousel ul { 
    overflow:hidden; 
    white-space:nowrap; 
    margin:0; padding:0; 
    list-style:none; 
    position:relative; 
    height:100%; 
    background:#99F; 
}
.carousel li { 
    display:inline-block; 
    background:#FFC; 
    height:100%;
}
.carousel li img{
    height:100%;
}

<div class="carousel">

   <ul>
       <li><img src="car"  /></li>
       <li><img src="boat"  /></li>
       <li><img src="train"  /></li>
       <li><img src="car"  /></li>
       <li><img src="boat"  /></li>
       <li><img src="train"  /></li>
   </ul>

</div>

Answer 1

尝试添加它应该工作的代码。 min-height适用于FF

html,body {
min-height:100%;
height:100%;   
}

响应式网站无法在Firefox中运行

1 个答案: