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

Question

我在基于webkit（和blink）的浏览器中有一个非常奇怪的错误。所有其他浏览器都没问题。

我有几个带有内嵌块显示类型和指定宽度的图像，因此它们并排堆叠在网格中。但是，有时 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">...

这些图像是从第三方服务器中提取出来的，当它们被缓存时它可以工作，这可能是一个延迟问题，浏览器无法快速阅读它所需要的内容？

Answer 1

  

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

• 确保容器的宽度小于100%
• 确保未设置position和float属性

• 确保important值在语法上正确无误：

          display: inline-block !important;