Question

这在FF和IE9上运行良好，但在IE7和8中失败。

我有两个隐藏的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;
 }

我还添加了溢出：隐藏在表单中但无济于事。这是我的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/，当您点击地图框中的任意一个按钮时，问题就出现了。

Answer 1

只需将 position：relative 设置为＆lt;页脚＆gt; 标记。重叠问题将得到解决。

footer{ position:relative; }

Answer 2

以下列方式对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错误。

另外需要注意的是，请检查this link是否对粘性页脚进行编码。这或多或少与处理html页面结构的概念相同。

Answer 3

我希望这有帮助！
http://jsfiddle.net/qUESn/1/

在IE上切换后，DIV（页脚）没有被按下

3 个答案: