2008-09-22 3 views
1

jQuery 사이트에서이 문제에 대한 버그 보고서를 보았지만 지금은 찾을 수 없다고 생각했습니다. IE6에서 대화 상자의 크기를 조정하려고합니다. 그러나 요소의 크기가 조정되면 내용과 제목 표시 줄의 크기가 조정되지 않습니다. 그러나 대화 상자가 커지면 크기가 조정됩니다. 결과는 사용자가 대화 상자의 크기를 더 작게 조정하면 닫기 버튼이 끊어지고 내용이 잘립니다.IE6에서 jQuery 대화 상자의 크기를 변경하려고합니까?

resizeStop 이벤트를 처리하고 내용과 제목 표시 줄의 크기를 수동으로 조정하려고 시도했지만 이상한 결과가 발생할 수 있습니다. 내용 영역의 요소 크기와 위치는 여전히 꺼져있었습니다. 또한 제목 표시 줄의 크기를 조정하더라도 닫기 단추는 여전히 다시보기로 이동하지 않습니다. 어떤 아이디어? 이것이 jQuery-ui의 버그 일 경우, 누구든지 좋은 해결 방법을 알고 있습니까?

<html> 
<head> 
    <title>Example of IE6 resize issue</title> 
    <link rel="stylesheet" type="text/css" href="http://ui.jquery.com/repository/latest/themes/flora/flora.all.css" /> 
    <script src="http://www.google.com/jsapi"></script> 
    <script>   
    google.load("jquery", "1");   
    google.load("jqueryui", "1");   
    google.setOnLoadCallback(  
    function() {     
     $(document).ready(function()   
     {    
     $("#main-dialog").dialog();   
     });  
    }); 
    </script> 
</head> 
<body> 
    <div id="main-dialog">  
     This is just some simple content that will fill the dialog. This example is  
     sufficient to reproduce the problem in IE6. It does not seem to occur in IE7  
     or FF. I haven't tried with Opera or Safari. 
    </div> 
</body> 
</html> 

답변

2

나는 해결책을 내놓을 수 있었다. 오버 플로우 : hidden 스타일을 대화 상자 컨테이너 div 요소 (CSS 클래스 .ui-dialog-container가 적용됨)에 추가하면 모든 것이 올바르게 조정됩니다. 식물상 테마에 다음과 같이 내가 한 모든 CSS 규칙을 추가했다 :

.ui-dialog .ui-dialog-container { 
    overflow: hidden; 
} 

그것은 또한 실행하여 수정 될 수있는 다음 :

if ($.browser.msie && $.browser.version == 6) 
{ 
    $(".ui-dialog-container").css({ overflow: 'hidden' }); 
}  

이 IE6에서 내가보고 된 문제를 해결하고있다 FireFox에 어떤 문제도 소개하지 않았습니다.

+0

일반적인 문제입니까? 레이아웃 문제입니까? 위치 추가 : relative 또는 zoom : 1 같은 일을 할 수 있습니까? –

+0

두 위치 모두 시도 : 상대 및 확대/축소 : 1, 어느 쪽도 오버 플로우 : 숨겨진 않았다 문제를 해결했습니다. –

0

CSS는 요인 일 수 있습니다. 스타일 시트를 볼 수 있도록 예제를 바꿀 수 있습니까? jQuery를 로컬에 의존하지 않도록 예제를 업데이트했습니다.

<html> 
<head> 
<title>Example of IE6 resize issue</title> 
<link rel="stylesheet" type="text/css" href="?.css" /> 
<script src="http://www.google.com/jsapi"></script> 
<script> 
    google.load("jquery", "1"); 
    google.load("jqueryui", "1"); 

    google.setOnLoadCallback(
    function() { 
     $(document).ready(function() 
     { 
      $("#main-dialog").dialog(); 
     }); 
    }); 
</script> 
</head> 
<body> 
<div id="main-dialog"> 
    This is just some simple content that will fill the dialog. This example is 
    sufficient to reproduce the problem in IE6. It does not seem to occur in IE7 
    or FF. I haven't tried with Opera or Safari. 
</div> 
</body> 
</html> 
관련 문제