div 사이의 IE8 공간이 줄어들고 있습니다.

div를 사용하여 메뉴를 만들었으므로 각 섹션은 두 개의 div (제목 및 내용)로 구성됩니다. 제목을 클릭 할 때 콘텐츠가 접히거나 펼쳐지지만 IE8에서는 섹션을 펼치거나 접은 후에 섹션 div 사이의 간격이 좁아집니다 .IE9, Chrome 및 Firefox는 모든 것을 정확하게 표시합니다.div 사이의 IE8 공간이 줄어들고 있습니다.

This 첫 번째 섹션은 아래에있는 공간을 제대로 표시되지만, 나머지 공간은 내가 창 크기를 조정하면 이상한 것은, 모든 again

This 잘 보이는됩니다

수축되어 나 '코드의 샘플입니다 사용하고, this은 jsfiddle입니다.

누군가가 동일한 문제를 해결하기를 바랍니다. 감사합니다

출처

2012-05-30 pollirrata

사업부에 제목과 내용을 포장 및 컨테이너 사업부를 – Huangism

이 코드를보십시오 :

여기 문제에 대한 설명이있다 :

http://jqueryfordesigners.com/animation-jump-quick-tip/ 효과적으로

가하는 포함 사업부에 제목과 내용 요소의 각 쌍을 포장하고 적용하여 그 바닥에 패딩. 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

div 사이의 IE8 공간이 줄어들고 있습니다.

답변

관련 문제