IE8 пространство между divs сокращается

У меня есть меню, построенное с использованием div, каждая секция состоит из двух разделов (Title и content). Содержание свернутое или развернутый, когда заголовок щелкнуло, но на IE8 пространство между секцией дивой сокращается после разворачивания и сворачивания дисплейного всех section.IE9, Chrome и Firefox правильноIE8 пространство между divs сокращается

This как это выглядит, то первый раздел корректно отображая с пространством под ним, а на остальном пространстве усаживается

странная вещь, если изменить размер окна, все выглядит нормально again

This образец кода I» м, и this - jsfiddle

Надеюсь, кто-то решил ту же проблему. Благодаря

источник

2012-05-30 pollirrata

обернуть заголовок и содержание в DIV и сделать пространство с использованием контейнера Div – Huangism

Попробуйте этот код:

Существует объяснение проблемы здесь:

http://jqueryfordesigners.com/animation-jump-quick-tip/

эффективно, обернуть каждую пару заголовка и содержания элементов в содержащем DIV, а затем применить ваш отступ в нижней части этого. Испытано в IE7, IE8, FF, Chrome &

<!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 сокращается

ответ

Смежные вопросы