jquery - jQuery slideDown、子がposition:relativeを持っているときのIE7のバグ

Question

簡単な例: http://jsfiddle.net/CnUkA/5/

slideDown アニメーションが適用される外側の div があり、この div の内側にはposition:relative.

ボタンをクリックするとすぐに内側の div が表示されるのは IE7 です。私がこれを使用している現実の世界では、そのdivが相対的である必要があり、絶対的にその中に子を配置できます。

- - 編集 - -

position:absolute私の状況ではonを使用するの#slideは適切ではありません。

#inner要素をdivに対して絶対的に配置するので、position:relativeそこから削除することもできません。

position:relativeonが必要な理由を示す更新された例を次に示し#innerます。 http://jsfiddle.net/CnUkA/9/

IE7 でスライド アニメーションが完了する前に、相対要素と絶対要素の両方が表示される

--- 編集 2 ---

以下の回答を組み合わせて使用​​すると、これはまともな解決策だと思います。

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

position:relative下にスライドしている div に追加しposition:static、アニメーションが完了したら設定します。これにより、要素が消えるのを防ぎます。

Answer 1

簡単な方法で、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>

Answer 2

#slideオフセットの親がdivではないため、子がすぐに表示されるようです。

divを設定position: relative;する#slideとうまくいきますが、何らかの理由で最後の 3 行がスライド後に消えてしまいます。

div に設定position: absolute;すると、正常に動作します。#slide

Answer 3

絶対位置を追加するだけです

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