我创建了一个水平滚动页面，其中许多图像彼此相邻。图像必须内嵌定位，以使它们垂直居中对齐。它们也不能超过并且必须适应视口。为了实现响应效果，我写了一个小的JS脚本，强制浏览器重新绘制内联元素，这通常只会在重新加载后发生。
我的问题是：我希望.container水平包装所有包含元素，图像之间没有间隙。不幸的是，几乎每个浏览器都表现不为了使其更具视觉效果，我将.container涂成灰色，并将包裹ul设为绿色边框。
在Firefox，Opera和现代IE中，如果我将float: left;添加到.container，所有图片都会完美包裹。但是，这对Chrome和Safari没有任何影响：换行以视口的宽度结束。
您是否有解决方案如何在Webkit浏览器中实现相同的效果？
此外，如果我减小视口的高度，则某些图像旁边会出现间隙（但不会出现在Safari中）。这些间隙看起来像列表元素中的填充，大小各不相同。如果我使用overflow: hidden;删除水平滚动条，则Chrome中的间隙会消失，但Firefox中则不会消失。在IE中，差距更大。
在HTML中，我已经删除了所有空格字符。
造成这些差距的原因是什么？如何在每个浏览器中删除它们？
感谢您的帮助！