-1

次のサイトで作業しています：buzzspherefilms.site40.net で、フッターが IE で期待どおりに表示されません。Chrome と Mozilla では正常に動作しますが、IE ではページの下部にフッターが表示されます。誰でも理由がわかりますか？また、これをスティッキーフッターに実装する際の助けは素晴らしいでしょう.

ありがとう

4

2 に答える 2

1

margin-top簡単な答えは、 onを調整する必要があるということです#container。

レイアウトには、合計高さがそれぞれ 120px と 40px の2 つの固定要素headerとがあります。navbar

margin-top: 160pxをonに設定するcontainerと、レイアウトはブラウザ間で一貫して機能します。

IE は、他のブラウザーとは異なる方法で自動上部マージンを計算するため、問題が発生する可能性があります。

スティッキーフッターについては、ウェブ上に方法に関する記事があるので、それが最初のステップになります。

jQueryの修正

containerjQueryを使用して高さを動的に設定しようとしています。.outerHeightIE では計算方法が異なるため、クロスブラウザーの問題が発生する可能性があります。

最初にこれをコメントアウトし (後で元に戻すことができます)、簡単な CSS 修正を試してください。

<script>
    $(document).ready(function() {
       $("#quickSearch").autocomplete({
       source: "quickSearch.php",
       minLength: 2
       });
          $('#container').css('marginTop', $('#header').outerHeight(true) + $('#navbar').outerHeight(true) );

    });
</script>
于 2013-04-01T19:10:12.497 に答える
0

スティッキーフッターの使用について言及していますが、使用しているようには見えません。これを可能にするcssは次のとおりです。（サイトからコピペしただけです）

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}

ソース: http://ryanfait.com/sticky-footer/

于 2013-04-01T19:08:01.883 に答える