IE7에서 jQuery를 사용할 때 숨겨진 내용

Question

jQuery를 사용하여 패널을 위/아래로 밀어 '단순'및 '고급'검색 패널간에 전환합니다. 슬라이드 후 첫 번째 필드에 입력 포커스를 설정하려고하지만 IE7에서 패널이 공백으로 표시됩니다. FF 3.5.1에서 발생하지 않습니다

원본 코드는 ASP.NET을 사용하지만 아래 간단한 HTML 및 JavaScript로 복제 할 수 있습니다. 내 첫 번째 시도는 div가 아닌 테이블을 기반으로했지만 동일한 문제가 발생했습니다.

나는 peekaboo 버그일지도 모른다고 생각했지만 제안 된 수정 사항 (위치 : 상대적, 확대/축소 : 1)을 시도했지만 운이 없었습니다.

데모 페이지가 열리면 간단한 검색 div가 표시됩니다. '고급'버튼을 클릭하면 고급 패널이 아래로 슬라이드되지만 숨겨집니다. 창 크기를 조정하면 다시 표시됩니다. focus()에 대한 jquery() 호출을 제거하면 문제가 해결됩니다. 이 라인에

$("#advSearchPanel").slideDown(500, function() { 

:

$(document).ready(function() { 
 

 
    $("#btnSwitchAdvanced").click(function() { 
 
    $("#simpleSearchPanel").slideUp(200, function() { 
 
     $("#advSearchPanel").slideDown(500, function() { 
 
     $("#txtASDescription").focus(); 
 
     }); 
 
    }); 
 
    }); 
 

 
    $("#btnSwitchSimple").click(function() { 
 
    $("#advSearchPanel").slideUp(200, function() { 
 
     $("#simpleSearchPanel").slideDown(500, function() { 
 
     $("#txtSimpleSearch").focus(); 
 
     }); 
 
    }); 
 
    }); 
 

 
    $("#advSearchPanel").hide(); 
 
});

.criteriaRow 
 
{ 
 
    clear:both; 
 
} 
 

 
.criteriaLabel 
 
{ 
 
    float:left; 
 
    width:200px; 
 
}   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="searchPanel" style="background-color: #dcdcdc; margin-top: 5px;"> 
 
    <div id="searchCriteria"> 
 
     <div id="simpleSearchPanel"> 
 
      <span>Simple Search</span> 
 
      <input type="text" id="txtSimpleSearch" /> 
 
      <input type="button" id="btnSwitchAdvanced" value="Switch to Advanced" /> 
 
     </div> 
 
     <div id="advSearchPanel"> 
 
      <span>Advanded Search</span> 
 
      <div> 
 
       <div class="criteriaRow"> 
 
        <div class="criteriaLabel"> 
 
         <span id="lblASDescription">Description:</span> 
 
        </div> 
 
        <div class="criteriaInput"> 
 
         <input type="text" id="txtASDescription" /> 
 
        </div> 
 
       </div> 
 

 
       <div class="criteriaRow"> 
 
        <div class="criteriaLabel"> 
 
         <span id="lblASId">Id:</span> 
 
        </div> 
 
        <div class="criteriaInput"> 
 
         <input name="txtASId" type="text" id="txtASId" /> 
 
        </div> 
 
       </div> 
 
      </div> 
 

 
      <div> 
 
       <div id="criteriaActions" style="float:left;"> 
 
        <input type="button" id="btnSwitchSimple" value="Switch To Simple" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

은 내가이 줄을 전환 한 후 IE8에서 작업이

$("#advSearchPanel").show(function() { 

Answer 2

@canice, 나는으로 실행했습니다 아무 것도 IE7에서 문제를 해결하는 것처럼 보이거나 이전과 같은/유사한 상황 IE6. 줌, 위치, Z- 인덱스 등의 모든 해킹 작업을 수행 했으므로 궁극적으로 나는 블래스트 된 브라우저를위한 추가 코드를 추가하게되었습니다.

대부분의 경우 jQuery를 사용하여 peekaboo를 재생하는 요소의 크기를 동적으로 변경하려면 애니메이션 함수가 실행 된 후 1 픽셀을 더하거나 뺍니다.

나는 이것이 어떤 의미에서 "완벽"하지 않다는 것을 인정하지만 그것이 일을하고 때로는 우리가 시간이나 자원을 가지고있는 것입니다.

현재 jQuery를 사용하여 브라우저 별 검사에 대한 자세한 정보를 찾을 수 있습니다

<!--[if lte IE 6]> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(element).dostuff(); 
}); 
</script> 
<![endif]-->