jQuery slideDown，当孩子有位置时的 IE7 错误：相对答案

【问题标题】：jQuery slideDown, IE7 bug when child has position:relativejQuery slideDown，当孩子有位置时的 IE7 错误：相对
【发布时间】：2012-05-16 10:08:13
【问题描述】：

这里的简单示例： http://jsfiddle.net/CnUkA/5/

我有一个外层 div，它应用了 slideDown 动画，在这个 div 里面是一个带有 position:relative 的内层 div。

点击按钮后立即显示的内部 div 是 IE7。在我使用它的现实世界中，我需要那个 div 是相对的，我可以用绝对值将孩子定位在其中。

--- 编辑---

在#slide 上使用position:absolute 不适合我的情况。

我将拥有相对于 #inner div 绝对定位的元素，因此我也无法从中删除 position:relative。

这是一个更新的示例，说明了为什么我需要在 #inner 上使用 position:relative。 http://jsfiddle.net/CnUkA/9/

在 IE7 中幻灯片动画完成之前，相对元素和绝对元素都会显示

--- 编辑 2 ---

结合使用以下答案，我认为这是一个不错的解决方案：

http://jsfiddle.net/CnUkA/13/

将position:relative 添加到向下滑动的div，然后在动画完成后设置position:static。这可以防止元素消失。

【问题讨论】：

我不确定如何解释您的解决方案。我认为问题在于内部 div 立即显示。（至少那是你一开始写的，这也是我遇到的问题。）另一方面，你的解决方案“防止元素消失”。我认为解决方案应该是让元素消失，直到动画进展足够远。

标签： jquery css internet-explorer

【解决方案1】：

似乎子元素立即显示，因为偏移父元素不是#slide div。

如果您在#slide div 上设置position: relative;，效果会更好，但由于某种原因，最后三行在幻灯片后消失了。

如果您在#slide div 上设置position: absolute;，它可以正常工作。

【讨论】：

谢谢，但不太适合我在 #slide 上使用 position:absolute 的需要

【解决方案2】：

简单的方法，我在我的IE浏览器中测试过

Remove-  #inner position:relative property And Update your jQuery script also

<script type="text/javascript">
$(document).ready(function(){

    $("button").click(function(){

         $("#slide").slideDown(2000, function()
         { 
         $("#inner").css("position","relative");
         });

    });

});
</script>

【讨论】：

可能是一个有用的方法。那个 div 里面的内容会改变，所以我不确切知道哪些元素被设置为相对和位置。我可以小心并始终使用相同的类名，以便在幻灯片动画之前将这些类的位置更改为静态，并在幻灯片完成后将它们更改回相对/绝对。唯一的问题是幻灯片完成后元素会跳动一下
请发布您的网站链接
网站不在公共领域。我已经用我使用的解决方案更新了我的问题。

【解决方案3】：

只需添加绝对位置

#slide{
   display:none;
   position:absolute;
}

【讨论】：

谢谢，但不太适合我在#slide上使用position:absolute的需要