IE8空間之間的divs正在縮小

我有一個使用div製作的菜單，每個部分由2個div（標題和內容）組成。當標題被點擊時，內容被摺疊或展開，但在IE8上展開和摺疊一個部分後，部分div之間的空間縮小.IE9，Chrome和Firefox正確顯示所有內容。IE8空間之間的divs正在縮小

This是它的外觀，第一部分與它下面的空間無法正確顯示，但在其餘的空間被收縮

奇怪的是，如果我調整窗口的大小，一切都看起來不錯again

This的代碼是我的一個樣本m使用，而this是jsfiddle

我希望有人解決了同樣的問題。由於

來源

2012-05-30 pollirrata

包裝你的標題和內容的一個div，使空間達到使用div容器 – Huangism

試試這個代碼：

存在的問題在這裏的解釋：

3210

實際上，包裹每對標題和內容元素的一個包含分區，然後套用您的填充到底部。經測試，在IE7，IE8，FF，&鉻

<!doctype html> 
<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $(".menu-section-content").hide(); 
     $(".menu-section-title").click(function() { 
      var theHeight = $(this).height(); 
      $(this).css('height', theHeight); 
      $(this).next(".menu-section-content").slideToggle(600); 
      $(this).toggleClass('collapse'); 
     }); 
    }); 
    </script> 

    <style> 
     div.menu-section-content 
     { 
      border: 1px solid #777; 
      border-top: none; 
      padding: 10px; 
      margin-left: 5px; 
      background-color: #ffffff; 
     } 
     div.menu-section-title 
     { 
      font-size: 100%; 
      border: solid 1px #777777; /*border-radius: 5px 0px 0 0;*/ 
      background-color: #A9C3C4; 
      color: #fff; 
      font-weight: 500; 
      margin-left: 5px; 
      cursor: pointer; 
      clear: both; 
      padding: 5px; 


     } 
     .expand 
     { 
      background-image: url('http://upload.wikimedia.org/wikipedia/commons/1/1a/Silk_bullet_arrow_up.png'); 
      background-repeat: no-repeat; 
      background-position: right center; 
     } 
     .collapse 
     { 
      background-image: url('http://souper-spices.com/wp-content/themes/shopperpress/template_shopperpress/images/langs/arrow.png'); 
      background-repeat: no-repeat; 
      background-position: right center; 
     } 

     .container { 
      padding-bottom: 10px; 
     } 

    </style> 
    </head> 

    <body> 
    <div class="container"> 
    <div class="menu-section-title expand"> 
    title 
    </div> 

    <div class="menu-section-content"> 
     options 
    </div> 

    </div> 

    <div class="container"> 
    <div class="menu-section-title expand"> 
    title 
    </div> 

    <div class="menu-section-content"> 
     options 
    </div> 
    </div> 

    <div class="container"> 
    <div class="menu-section-title expand"> 
    title 
    </div> 

    <div class="menu-section-content"> 
     options 
    </div> 
    </div> 

    <div class="container"> 
    <div class="menu-section-title expand"> 
    title 
    </div> 

    <div class="menu-section-content"> 
     options 
    </div> 
    </div> 

    </body> 
</html>

來源

2012-05-30 16:03:32

謝謝，這解決了我的問題:) – pollirrata

IE8空間之間的divs正在縮小

回答

相關問題