Chrome(webkit?）无法在幻灯片中正确显示图像

Chrome (webkit?) not displaying images correctly in a slideshow

本文关键字：显示图像显示图幻灯片 webkit Chrome 更新时间：2023-09-26

我读过很多关于webkit浏览器存在图像问题的帖子。我找不到一个帖子，也找不到我要解释的帖子的答案。

我使用jQuery创建了一个自制的幻灯片，基本上将所有图像并排放置在一行上，然后使用mask元素（溢出：隐藏）和margin-left属性来选择要显示的图像。我没有重新发明轮子。。。

在FF、Opera甚至IE上，它都像一种魅力！但我在Chrome上运气不佳（我没有测试Safari）：第一张图片显示还可以，但当滑动效果开始时，第一张幻灯片的20像素大小仍然位于幻灯片的顶部，并覆盖第二张幻灯片。如果我继续滑动，第一个幻灯片部分将保留为以下幻灯片的覆盖部分。图片在Chrome上刷新不好，这让整个幻灯片看起来很垃圾。

我试着在滑动效果之后使用images-css属性来强制容器刷新其内容，但再次失败。

有人知道如何解决这个问题吗？

感谢

找到修复程序。。。

正如我所说，试图强制容器使用一些不同的css属性刷新其内容是不起作用的。不过，有效的方法是在容器中添加一个跨度，仅此而已……在出现问题时，我的容器中只有图像和地图。我（运气好）加了一个跨度，它马上就起作用了！

我只能假设为什么添加一个跨度会让整个容器表现良好。我想这和IE6用来攻击极客的"hasLayout"属性有点一样。在元素具有一致性（高度、宽度…设置了值）之前，它无法正确渲染该元素。

无论如何，我希望这将有所帮助，是的，我确实敢于将Chrome与IE6进行比较…；-）

美好的一天