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