Webkit顯示非緩存的行內塊圖像作爲塊

Question

我在基於webkit（和閃爍）的瀏覽器中有一個非常奇怪的錯誤。所有其他瀏覽器都很好。

我有幾個圖像的內嵌塊顯示類型和寬度指定，所以他們並排在網格中。但是有時 webkit瀏覽器會將它們垂直放置。檢查元素顯示正確的寬度，但覆蓋顯示它橫跨容器的整個寬度。

CSS面板是Chrome說圖像有一個塊的顯示類型。我向img標籤添加了一個！重要的inline-block樣式屬性，但它們有時仍會被阻擋 - 但是沒有任何代碼告訴它們具有這種顯示類型。

我也無法使用開發人員工具更改值。如果我輸入另一個值，則不能更改顯示類型。我發現解決這個問題的唯一方法就是在下載圖像後觸發一個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;