0

ページは 2 つの部分に分かれています。

  1. 大きな 100% ブラウザの高さのヘッダー
  2. メインコンテンツとフッター

これらのパーツの 1 つだけがブラウザに表示されます。Firefox と Chrome で正常に動作する次のコードを記述します。

    var $header = $('.mainHeader');
    var $main = $('.main');
    var $footer = $('.mainFooter')
    var $body = $('body');

    $('#tosite').on('click', function(e){
        $body.css({overflow: 'auto'});
        $main.show();
        $footer.show();
        $([$header, $main, $footer]).each(function(n){
            var $this = $(this);
            $this.animate({top: -$window.outerHeight()}, 400, 'linear', function(){
                if (n == 0) {
                    $this.hide();
                }
                $this.css({top:0});
                $this.css('position', 'relative');
            });
        });
        e.preventDefault();
        return false;
    });

    $('#back').on('click', function(e){
        $body.css({overflow: 'hidden'});
        $([$header, $main, $footer]).each(function(n){
            var $this = $(this);
            $this.css({top: -$window.outerHeight()}).show();
            $this.animate({top: 0}, 400, 'linear', function(){
                if (n > 0) {
                    $this.hide();
                }
            });
        });

        e.preventDefault();
        return false;
    });

しかし IE では、ブラウザーの 100% の高さに対してフッターの後に大きなギャップがあります。ウィンドウのサイズを変更するたびに消えます。IEのバグのようです。解決策はありますか？

4

2 に答える 2

1

IE は高さを間違って計算するのが好きです。たとえば、スクリプトによって高さが設定されたブロックや画像を含むブロックが気に入らないことがあります。その結果、正しくレンダリングされません。IE8、9、10 を除くすべてのブラウザーで問題が発生しました。フッターの後にギャップが表示され、ウィンドウのサイズが変更されると消えていました。

すべてのケースに明らかな理由があるとは思われないため、これに対する css ソリューションを見つけることができませんでした。そのため、すべてのスクリプトが移動した後に再レンダリング (サイズ変更時に発生) を強制しました。方法の 1 つ: ボディの padding-top を css で 1px (または任意の値) に設定し、スクリプトを使用してゼロ (または必要なもの、ただし同じではない) に変更します。

于 2013-05-28T21:41:24.947 に答える