1

我在基于 webkit(和闪烁)的浏览器中有一个非常奇怪的错误。所有其他浏览器都很好。

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

CSS 面板是 Chrome 表示图像具有块的显示类型。我向 img 标签添加了一个 !important inline-block 样式属性,但它们有时仍会是块状的——但没有任何代码告诉它们具有这种显示类型。

我也无法使用开发人员工具更改值。如果我输入另一个值,则无法更改显示类型。我发现修复它的唯一方法是在下载图像后触发 JavaScript 事件,以将显示值设置回 inline-block。

如果图像已被缓存,那么它们将始终正确显示。

这种行为很少相同,并且指向 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">...

图像是从第三方服务器中提取的,当它们被缓存时它可以工作,也许这是一个延迟问题,浏览器无法足够快地读取它需要的内容?

显示错误

盒子模型细节

4

1 回答 1

0

If the images have been cached then they will always display correctly.

  • Make sure the width of the container is less than 100%
  • Make sure the position and float properties are not set
  • Make sure the important value is syntactically correct:

            display: inline-block !important;
    
于 2014-11-04T20:04:40.587 回答