Jquery 动画溢出元素在 Safari 中移动

Question

我正在开发一个年报网站，至少需要兼容IE、FF、Safari等主流浏览器。我有几个关于 jquery 效果的问题。

我在页面上添加了一个 jquery 幻灯片显示效果，它会部分显示主要内容 div 几秒钟，然后它会动画显示其余内容。我已经在 WinXP 的 IE6、IE7 和 FF 3 上对其进行了测试，并且运行良好。它也适用于 FF3 中的 MAC。

但是该页面在 MAC 上的 Safari 4.04 中有一个严重的问题：整个动画 div 内容向最右边移动大约与内容的原始宽度一样多。我还注意到，如果我删除了“溢出”相关的 css 代码，那么 div 最初会显示在正确的位置，但 jquery 幻灯片效果当然不会正常工作，因为最初它需要使用“溢出”隐藏内容。随着 jquery 动画的开始，div 也会再次移动。

这里是链接：http://www.attilareinhardt.com/clients/test/mainWhoWeAre_slide2.html

这个问题有什么解决方法或解决方案吗？

另一个小问题是动画幻灯片效果在某些情况下不会打开并显示所有内容。底部部分有时会过早地被剪裁和裁剪，它会在所有浏览器上发生，但并非总是如此。我猜它在正确计算内容 div 的正确高度时遇到了问题。有没有办法强制执行正确的高度计算？

Answer 1

当我将

clear:left;

添加到您的 id="mainContent" 元素的样式时，它会更正它。

Answer 2

为什么 user113717 的解决方案有效？ （不好意思，只是评论没有足够的声誉）。 反正2023年还在工作。