online - www jquery js




slideUp()/ slideDown()を使用するとjQuery:IE 8の余白が折りたたまれる (3)

オーバーフロー:隠れています。

仕事をするべきです:)

テストファイルをここにアップロードしました。

http://dl.dropbox.com/u/2201804/IE8test.html

"Click me" divをクリックすると、slideDown()を使用して "Feedback" divが表示されます。 別のボックスにある[クリックしてください]をクリックすると、現在表示されているフィードバックが上にスライドし、適切なフィードバックが下にスライドします。

IE 8では、slideUp()/ slideDown()アクションが完了すると、ボックス間の余白が縮小されます。

これはjQueryのアニメーションの問題なのでしょうか、それともIE 8のディスプレイのバグなのでしょうか。


CSSを使用して問題を解決できなかったので、この古いスレッドを私のソリューションで更新するだけです。 slideToggleのコールバック関数を使用して文書の本文に焦点を当てたのですが、ページの他の場所をクリックするとDOMがリフローし、余白が戻ってきたように思われるためです。

.slideToggle(
    500,
    function() {
        document.body.focus();
    }
);

私はまだこの "overflow:hidden"提案を使用してマージンが消えるという問題を抱えていて、IE8でslideUp / slideDown機能を完全に無効にすることを決定しました。ただし、IE 8が使用されていたときだけです。

これを実現するために、 IEの条件付きコメントを使用して、html要素にクラスを追加しています。

<!--[if IE 8]><html class="ie8"><![endif]-->

次に、私のJavaScriptで次の関数を定義して、slideUp / slideDown関数をオーバーライドします。

(function($) {
    // disable slideDown/slideUp in IE8 due to margin removal issue
    if ($('html').hasClass('ie8')) {
        $.fn.slideDown = function() {
            return this.show();
        };        
        $.fn.slideUp = function() {
            return this.hide();
        };
    }
})(jQuery);

そして、私の知る限りでは、これで問題は解決しました。 お役に立てれば!