Css 将非缓存内联块图像显示为块的Webkit

我在webkit和基于blink的浏览器中发现了一个非常奇怪的bug。所有其他浏览器都可以

我有几个图像具有内联块显示类型和指定的宽度，因此它们在网格中并排堆叠。但是，有时候webkit浏览器会将它们垂直放置。检查元素时会显示正确的宽度，但叠加显示它跨越容器的整个宽度

CSS面板为Chrome，表示图像具有块的显示类型。我加了一个！img标记的重要内联块样式属性，但它们有时仍然是块-但没有任何代码告诉它们使用此显示类型

我也无法使用开发人员工具更改值。如果键入其他值，则无法更改显示类型。我找到的唯一修复方法是在下载图像后触发JavaScript事件，将显示值设置回内联块

如果图像已缓存，则它们将始终正确显示

这种行为很少是相同的，并且指向Webkit中的一个渲染错误。以前有没有人遇到过这个问题，并找到了比我的JS更优雅的解决方案

HTML是基本的，但是一些样式属性是由JS注入的，但是删除这些代码并没有什么不同

<img src="image.jpg" id="image1"><img src="image.jpg" id="image2"><img src="image.jpg" id="image3"><img src="image.jpg" id="image4">...

这些图像是从第三方服务器中提取的，当它们被缓存时，可能是由于浏览器无法足够快地读取所需内容而导致的延迟问题

如果图像已缓存，则它们将始终正确显示

确保容器的宽度小于100% 确保未设置位置和浮动属性 确保重要值在语法上正确：

        display: inline-block !important;

---

我不认为内联块是跨浏览器兼容的。尝试块并使用float：left@wingyip它得到了很好的支持，并且在缓存图像时页面能够正确呈现