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

Question

我已经阅读了很多有关Webkit浏览器图像出现问题的帖子。 我找不到帖子，因此也找不到我要解释的帖子的答案。

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

在FF，Opera甚至是IE上，它都像一个魅力！ 但是我在Chrome上没有运气（我没有测试过Safari）：第一张图片显示正常，但是当开始滑动效果时，第一张幻灯片的20px-ish保留在幻灯片的顶部并覆盖第二张幻灯片。 如果继续进行滑动，则第一个幻灯片部分将作为后续幻灯片的覆盖层。 图片无法在Chrome上正常刷新，这会使整个幻灯片显示看上去很垃圾。

我尝试在滑动效果后使用图像的css属性，以迫使容器刷新其内容，但是再次失败了。

有人对如何解决这个问题有想法吗？

谢谢

Answer 1

找到了解决办法...

正如我所说，尝试使用某些不同的CSS属性强制容器刷新其内容没有用。 不过，有效的方法是在容器中添加一个跨度，就是这样。在发布该问题时，我的容器中只有图像和地图。 我加了一个跨度（运气不好），它马上就起作用了！

我只能假设为什么添加一个跨度会使整个容器运行正常。 我猜想它与IE6用来吸引极客的“ hasLayout”属性有点类似。 在元素具有一致性（高度，宽度...设置值）之前，它无法正确呈现该元素。

无论如何，我希望这会有所帮助，是的，我确实敢比较Chrome与IE6 ... ;-)

美好的一天