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

【问题标题】：DIV (footer) not being pushed down after toggle on IE在 IE 上切换后 DIV（页脚）没有被按下
【发布时间】：2012-09-17 17:07:38
【问题描述】：

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

【问题讨论】：

从 #content-info 中移除 clear:both 和 float:none
@SACHIN 你应该在这里讨论而不是要求他发送代码或更好的jsfiddle
是的，我知道，但是当我检查 ie webdeveloper 工具并删除浮动并清除时，它在我的系统中工作正常
也许这个链接可以帮助你反思stackoverflow.com/questions/5227331/…这个脚本为Internet Explorer创建了html5的缺失元素，比如页脚。
@CharlesJourdan 我已经在网站上使用它了

标签： jquery css html

【解决方案1】：

只需将 position: relative 设置为标签。重叠问题将得到解决。

footer{ position:relative; }

【讨论】：

在你的ie.css（少于9个浏览器）或foundation.css（通用css）中添加上述样式
我试过了，虽然它没有显示在 IE 开发人员工具中，但它在那里并且没有效果
别管最后一条评论了。为什么需要相对位置？
"zoom:1" 样式是 IE 浏览器布局的问题。请参考The Power Of ZOOM - Fixing CSS Issues In Internet Explorer 澄清您的问题。

【解决方案2】：

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

【讨论】：

【解决方案3】：

用以下方式重构你的 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 页面结构的概念大致相同。

【讨论】：

本网站不使用置顶页脚，如果我这样做布局将与其他页面的设计不一致