L'espacement de Firefox est différent et erratiquement différent?

Question

J'ai créé la fonction de défilement à défilement horizontal pour afficher toutes mes photos sur un long écran de type bande/film.

How the div is supposed to look

sur Google Chrome et Safari, la marge de gauche 0px entre les images codées comme des éléments de liste affiche parfaitement. Cependant, sur Firefox, l'espacement est énorme, aléatoire et erratique. L'espacement est si étrange qu'il empêche également les photos ultérieures d'être affichées aussi bien. (Également la barre de défilement satanés sur le fond ne se manifeste que dans Firefox, mais je vais vivre avec ça si je peux corriger l'espacement)

This is how it looks on Firefox

S'IL VOUS PLAÎT AIDE QUELQU'UN, CONDUIT ME CE MAD.

Ceci est mon 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> 

C'est le CSS pour elle

#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

changer votre style liinline-block-inline.

li { 
    display: inline; 
} 

Answer 2

Les grands espaces sont causés par les images ne se développe pas à remplir la totalité de la largeur de la li. Pour résoudre ce problème, définissez:

li img { 
    width: 100%; 
}