1

これは FF と IE9 では問題なく動作しますが、IE7 と 8 では失敗します。

内部にフォームを含む 2 つの非表示の div があります。ボタンをクリックすると、フォームを含む正しい div が下に表示されます。これらはすべて正常に機能しますが、IE7 および 8 ではフッターがフォームに重なってしまい、トグル イベントによって押し下げられません。

これが私のhtmlです（縮小）：

    <div class="row" id="contactesp">
        <div class="twelve columns">
            <!-- Contact Form 7 plugin shows the form here -->
        </div>
    </div>
    <div class="row" id="contactmund">
        <div class="twelve columns">
            <!-- Contact Form 7 plugin shows the form here -->
        </div>
    </div>
    <!-- Footer -->
    <footer role="contentinfo" id="content-info">
        <div class="row">Content here</div>
    </footer>

私のCSS（一部）：

 #content-info {
     background-color: #1C3F94;
     clear: both;
     color: #FFFFFF;
     float: none;
     margin: 20px -20px 0;
     padding: 0 4%;
     display:block;
 }
 #contactesp, #contactmund {
     display: none;
     height: auto;
     overflow: hidden;
 }

また、overflow:hidden をフォームに追加しましたが、役に立ちませんでした。これが私のJQueryです：

    jQuery(document).ready(function ($) {
        $('.enesp').on('click',function(){
            $('#contactmund').hide();
            $('#contactesp').toggle();
        });
        $('.enmund').on('click',function(){
            $('#contactesp').hide();
            $('#contactmund').toggle();
        });
    });

完全なコードのサイトはこちら: http://www.institutoespanol.net/contacto/で、マップ ボックス内のいずれかのボタンをクリックすると問題が表示されます。

4

3 に答える 3

2

position:を< footer >タグに対して相対的に設定するだけです。オーバーラップの問題は解決されます。

footer{ position:relative; }
于 2012-09-17T09:07:38.610 に答える
0

次の方法で html を再構築します。

<html>
    <head></head>
    <body>

        <div class="main-page">
            <!-- All the main content here, all the divs as you want put it at this place. -->
        </div>

        <div class="footer">
            <!-- Footer contents -->
        </div>
    </body>
</html>

このcssを割り当てます

.main-page {
    height: 100%;
    padding-bottom:60px;   /* Height of the footer */
}

.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
}

おそらくこれが役立つでしょう。ieこの構造により、私のエラーの一部が削除されました。

別の注意点として、スティッキー フッターのコーディングについては、このリンクを確認してください。これは、HTML ページの構造を扱う概念とほぼ同じです。

于 2012-09-12T11:26:39.953 に答える
0

これが役立つことを願っています！
http://jsfiddle.net/qUESn/1/

于 2012-09-14T07:23:54.387 に答える