1

这在 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/当您单击地图框中的任一按钮时，就会出现问题。

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 回答