3

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>
4

2 に答える 2

2

解決策を思いつくことができました。スタイルoverflow: 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 では問題が発生しませんでした。

于 2008-09-24T21:29:39.393 に答える
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>
于 2008-09-23T09:31:54.150 に答える