IE6 で jQuery ダイアログのサイズを変更しようとしていますか?

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

質問

jQuery サイトでこれに関するバグ レポートを見たはずだったのですが、今は見つかりません。IE6でダイアログのサイズを変更しようとしています。ただし、要素のサイズが変更されても、コンテンツとタイトル バーのサイズは縮小されません。ただし、ダイアログを大きくするとサイズも大きくなります。その結果、ユーザーがダイアログのサイズを小さくすると、閉じるボタンが切り取られ、コンテンツが切り取られます。

sizeStop イベントを処理し、コンテンツとタイトルバーのサイズを手動で変更しようとしましたが、奇妙な結果が生じる可能性があります。コンテンツ領域の要素のサイズと位置はまだずれていました。また、タイトル バーのサイズを変更しても、閉じるボタンが表示に戻りません。何か案は？これが 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 ルールを flora テーマに追加することだけです。

.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