Question

我创建了水平滚动div，以便在长的carousal / film strip显示屏上显示我的所有照片。

在Google Chrome和Safari上，编码为列表项的图像之间的0px左边距显示完美。但是，在Firefox上，间距是巨大的，随机的和不稳定的。间距太奇怪，以至于它也会阻止后面的照片显示。（另外底部的讨厌的滚动条只显示在Firefox中，但如果我可以修改间距，我将继续使用它）

This is how it looks on Firefox

请有人帮忙，这让我感到不舒服。

这是我的HTML

<section id="photocontainer">

    <ul>

        <li> 

            <div class="initialspace"></div> 

        </li>

        <li><a href="https://www.flickr.com/photos/zennawong/18873365401" title="Scotia In The Fog by Zenna Wong, on Flickr" target="blank"><img src="https://c2.staticflickr.com/6/5483/18873365401_46f0a40ce6_c.jpg" alt="Scotia In The Fog"></a></li>

        <li><a href="https://www.flickr.com/photos/zennawong/18661212110" title="Rosewood Carpark by Zenna Wong, on Flickr" target="blank"><img src="https://c2.staticflickr.com/4/3842/18661212110_92cb80e80b_b.jpg" alt="Rosewood Carpark"></a></li>

        <a href="https://www.flickr.com/photos/zennawong/18873364491" title="Liquor &amp; Lights by Zenna Wong, on Flickr" target="blank"><img src="https://c4.staticflickr.com/4/3878/18873364491_d9ac0869b1_z.jpg" alt="Liquor &amp; Lights"></a>

        <li><a href="https://www.flickr.com/photos/zennawong/18844333466" title="Purple City Hall by Zenna Wong, on Flickr" target="blank"><img src="https://c2.staticflickr.com/4/3696/18844333466_d921e2f71b_b.jpg" alt="Purple City Hall"></a></li>

        <li><a href="https://www.flickr.com/photos/zennawong/18249959233" title="Too Cool by Zenna Wong, on Flickr" target="blank"><img src="https://c2.staticflickr.com/4/3718/18249959233_4d3a12a9af_c.jpg" alt="Too Cool"></a></li>

        <li><a href="https://www.flickr.com/photos/zennawong/18682867498" title="Darby&#x27;s Window by Zenna Wong, on Flickr" target="blank"><img src="https://c2.staticflickr.com/6/5517/18682867498_9a7f33bc0b_z.jpg" alt="Darby&#x27;s Window"></a></li>

        <li><a href="https://www.flickr.com/photos/zennawong/18682866998" title="Cotton Candy Skies by Zenna Wong, on Flickr" target="blank"><img src="https://c2.staticflickr.com/6/5462/18682866998_25526d0459_o.jpg" alt="Cotton Candy Skies"></a></li>

        <li><a href="https://www.flickr.com/photos/zennawong/18873364871" title="Woodwards by Zenna Wong, on Flickr" target="blank"><img src="https://c2.staticflickr.com/4/3902/18873364871_021cc9d56a_b.jpg" alt="Woodwards"></a></li>

        <li><a href="https://www.flickr.com/photos/zennawong/18682866698" title="Gastown by Zenna Wong, on Flickr" target="blank"><img src="https://c4.staticflickr.com/4/3783/18682866698_87518c3ccb_o.jpg" alt="Gastown"></a></li>

        <li><a href="https://www.flickr.com/photos/zennawong/18249957443" title="Grand Library by Zenna Wong, on Flickr" target="blank"><img src="https://c2.staticflickr.com/6/5495/18249957443_eba1e6e4d3_b.jpg" alt="Grand Library"></a></li>





    </ul>

</section>

这是它的CSS

#photocontainer {
height: 37.5em;
position: absolute;
top: 50%;
transform: translateY(-50%);
overflow-y: hidden;
overflow-x: auto; 
width: 910em;
}

#photocontainer li {
margin-left: 0px;
}

img {
height: 100%;
}

.initialspace {
width: 15.7em;
height: 37.5em;
float: left;
}

Answer 1

将li样式从inline-block更改为inline。

li {
  display: inline;
}

Answer 2

大空间是由于图像未扩展以填充li的整个宽度造成的。要解决此问题，请设置：

li img {
    width: 100%;
}

Firefox间距是不同的，不同的是不同的？

2 个答案: