이 jQuery 스 니펫을 Internet Explorer에서 작동시키는 방법은 무엇입니까?

IE를 싫어할 시간이 있다면, 바로 그 것입니다. 이 코드는 내용이있는 상자로 시작합니다. 버튼을 클릭하면 상자가 드롭 다운되고 페이드 인됩니다.이 jQuery 스 니펫을 Internet Explorer에서 작동시키는 방법은 무엇입니까?

<html> 
<script type="text/javascript" src="jquery.js"></script> 
<script type='text/javascript'> 

function Test() 
{ 
    var item_height = $('#test').height(); 
    $('#test').height(0); 
    $('#test').css('opacity','0'); 

    $('#test').animate({ height: item_height, opacity: '1' },400); 
} 

</script> 
<body> 
<!-- The div below holds the sample content --> 
<div id="test" style='border: 1px solid black;'> 
    Content<br> 
    Content<br> 
    Content<br> 
    Content<br> 
    Content 
</div> 
<!-- The button to test the animation --> 
<br><br> 
<div style='position: absolute; top: 150px; left: 10px;'> 
    <button onclick='Test();'>Test</button> 
</div> 
</body> 
</html>

이 간단한 예제는 Chrome, Safari 및 Opera에서 작동합니다. 그러나 Internet Explorer? 아니요입니다.

IE에서 작동하도록 어떻게 해결할 수 있습니까?

출처

2010-04-21 Nathan Osman

이

<html>

변경? 어떤 IE에서 테스트 해 보았습니까? 필요한 ''태그를 추가 했습니까? –

그들이 중요하지 않다고 생각해서 나는 이것을 무시했습니다. DOCTYPE을 잊어 버렸습니다. –

<head> 태그 및 doctype 선언이 누락되어 페이지가 Quirks 모드로 렌더링됩니다. 발생 또는 발생하지 않습니다 어떤이

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head>

출처

2010-04-21 22:18:43 Yisroel

그게 효과가 있습니다 ... heh-heh ... 이제 jQuery 문서에서 작성한 주석을 삭제하는 것이 좋습니다. –

어 - 오. 그것은 나를시키지 않을 것이다. jQuery 워드 프로세서의 누군가가 이것을 읽는다면 - 미안하다. 거기서 주석을 삭제하는 방법을 알 수 없다. –

IE에서 항목의 높이가 변경되지 않는다고 가정합니다. 요소의 높이가 0으로 올바르게 설정되지 않은 것처럼 보입니다. 나는 이것이 왜 몰라

$('#test').height(1);

에

$('#test').height(0);

을 변경할 때 내 IE8에서 작동합니다. documentation on height()에는 IE 별 특징이 전혀 없습니다.

출처

2010-04-21 22:07:24

감사합니다. 높이를 1로 설정하면 실제로 문제가 해결됩니다. 아마도 jQuery 문서에서 이에 대해 언급해야합니다. –

그 흥미로운 .height (0)는 Quirks 모드 – Yisroel

에서 작동하지 않습니다. 예, 꽤 이상합니다. –

이 jQuery 스 니펫을 Internet Explorer에서 작동시키는 방법은 무엇입니까?

답변

관련 문제