DIV（页脚）切换后不被向下推到IE

这工作正常，在FF和IE9，但无法在IE7和8DIV（页脚）切换后不被向下推到IE

我有一个里面含有一种形式两个隐藏的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/，问题出现在你点击任何按钮的地图盒中。

来源

2012-09-05 Elaine Marley

删除明确：既和float：没有从＃内容信息 – supersaiyan

同样的事情发生 –

@SACHIN你应该在这里讨论，而不是要他送 –

只需设置位置：相对于到<页脚>标签。重叠问题将得到解决。

footer{ position:relative; }

来源

2012-09-17 09:07:38 sureshunivers

添加上述样式或者您的ie.css（对于少于9浏览器）或foundation.css（普通的CSS） – sureshunivers

我试过这个，虽然它没有显示在IE开发人员的工具，它是在那里，并没有影响 –

不知道最后的评论这没有办法。为什么这个职位相对需要？ –

做你的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页面结构相同的概念。

来源

2012-09-12 11:26:39 mtk

本网站不使用粘滞页脚，如果我这样做，版面将不会与其他页面中的设计保持一致 –

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

来源

2012-09-14 07:23:54