IE8에서 .toggle이 제대로 작동하지 않습니다.

Question

IE8에서는 토글이 작동하지만 아래 내용이 오버레이됩니다. 다른 모든 브라우저에서 정상적으로 작동합니다.

$(document).ready(function() { 

    $('.toggle').hide(); 

    $('.expand-all').click(function(){ 
     // switch visibility 
     $(this).data('is_visible', !$(this).data('is_visible')); 

     // change the link depending on whether the element is shown or hidden 
     $(this).html((!$(this).data('is_visible')) ? 'Expand all' : 'Hide'); 

     $(this).next().toggle(); 

    return false; 
    }); 


}); 

HTML :

<div id="categories"> 
     <div class="cat"> 
      <h3>Rice</h3> 
      <ul> 
       <li><a href="">Rice brand 1</a></li> 
       <li><a href="">Rice brand 2</a></li> 
       <li class="expand-all">Expand all</li> 
       <div class="toggle"> 
        <li><a href="">Rice brand 1</a></li> 
        <li><a href="">Rice brand 1</a></li> 
       </div> 
      </ul> 
     </div> 
     <div class="cat">etc</div> 
     <div class="cat">etc</div> 
     <div class="cat">etc</div> 
    </div> 

Answer 1

나는

Here's what I mean

JQuery와 ... 행운 그러나이 문제를 해결하기 위해 지난 2 시간 동안 노력했습니다 현재 display : inline-block 속성에 문제가있는 것처럼 보입니다. etting. 여기

더 많은 것들을 그냥 구글 "인터넷 익스플로러 8 인라인 블록"을 시도하기위한 시도하는 일이다 : http://www.compsoft.co.uk/Blog/2009/11/inline-block-not-quite-inline-blocking.html 또한

당신이 코드에이를 추가해야합니다, 그래서 IE7에서, display : inline-block 속성을 수락하지 않습니다 그것뿐만 아니라 IE7에서 작동합니다

.some-ele { 
    display : inline-block; 
    *display : inline; 
    zoom  : 1; 
} 

*display 속성은 유효하지만 여전히 IE7에서 읽을 수 있습니다 그것은이 적용하는 요소는 수동으로 설정할 수없는 hasLayout 속성을 가지고 있어야하지만 당신은 할 수 zoom : 1을 설정하여 강제로 설정하십시오. IE6를 들어

당신은 일을 display : inline-block에 대한 높이를 지정해야하지만 당신은 IE6의 높이를 지정하려는 경우에만 IE6 (IE 소화 것보다 잘못된 코드)에 의해 읽을 수 있습니다 _height : XXpx를 사용할 수 있습니다. 다음은 이에 대한 정보입니다. http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/