IE6에서 jQuery 대화 상자의 크기를 조정하려고 하시나요?

StackOverflow https://stackoverflow.com/questions/118280

문제

jQuery 사이트에서 이에 대한 버그 보고서를 본 줄 알았는데 지금은 찾을 수 없습니다.IE6에서 대화 상자의 크기를 조정하려고 합니다.그러나 요소의 크기가 조정되면 콘텐츠와 제목 표시줄의 크기가 줄어들지 않습니다.그러나 대화 상자가 더 커지면 크기가 조정됩니다.결과적으로 사용자가 대화 상자 크기를 더 작게 조정하면 닫기 버튼이 잘리고 내용이 잘립니다.

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>
도움이 되었습니까?

해결책

나는 해결책을 생각해 낼 수있었습니다.스타일을 추가하면 과다:숨겨진 대화 상자 컨테이너 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에서는 아무런 문제도 발생하지 않았습니다.

다른 팁

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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top