web-dev-qa-db-ja.com

IEでのjQuery UIダイアログの問題

UIダイアログと一緒に新しいjQuery 1.3.2およびjQuery-ui-1.7ライブラリを使用しています。複数のフォーム要素（テキストボックス、チェックボックスなど）が含まれたdivタグがあります。ページが読み込まれると、jQueryはdivをダイアログとして表示します。これはFFではまったく問題なく動作しますが、IEではdivの高さが間違っています。タイトルバーにコンテンツの一部を表示しているだけです。 divの作成時に高さを明示的に設定しました。ダイアログを開いた後で高さオプションを設定した場合、高さは修正されますが、コンテンツは空白です（テキストボックスの上部3分の1が表示されます）。ダイアログのサイズ変更を許可する場合、IEでダイアログのサイズを変更すると正常に動作しますが、IEユーザーにサイズ変更のみを強制したくありません。内容を確認します。アイデアはありますか？ダイアログの作成に使用するコードは次のとおりです。

$('#dialogDiv').dialog({ 
    bgiframe: true, 
    height: 400, 
    width: 620, 
    modal: true, 
    draggable: true, 
    resizable: false, 
    close: function(event, ui) {
        if($('#agree').val() != '1')
            location.href = 'somepage.html';
    }
});
internet-explorerjquery-uimodal-dialog
26
Dan Appleyard

自分の質問に答えました。ダイアログの高さのプロパティと、ダイアログ内のいくつかの要素をいじる必要がありました。よろしくお願いします！

0
Dan Appleyard

いくつかのGoogle検索を実行した後、私は質問に対する真の答えを見つけました。これは、互換性のないDoctypeが原因です。詳細については、 http://osdir.com/ml/jquery-ui/2009-08/msg00388.html にアクセスしてください。

私のコードで試してみましたが、このURLの解決策で問題は解決しました。

30
Monte Chan

IE7でも同じ問題が発生しており、症状と解決策を詳しく調べました。コンテンツのないダミーダイアログを作成すると、高さが正しくレンダリングされることに気付きました。したがって、私はさまざまなタイプのコンテンツをいじって、問題を克服するために異なる方法でコンテンツを書くことができるかどうかを確認しました。運が悪い。しかし、私が発見したのは、追加したコンテンツが多いほど、ダイアログがIE7のみで短くなることです（非表示のアイテムでさえ、少し短くなります）。したがって、単純なコンテンツはそれほど大きな影響を与えない可能性があります（したがって、この問題についての苦情は多くありません）。追加したテーブルと多くのフォームアイテムは、非常に顕著な効果を生み出します。

高さをautoに設定するといくらかうまく機能しますが、IE7はコンテンツの高さを約10ピクセル（計算されたオブジェクトのパディングの高さ）だけ誤って計算しているため、jQueryがスクロールバーを追加します。完璧ではありませんが、以下のことを考えると許容範囲です。

別の回避策が見つからなかったので、DOCTYPEソリューションの調査を開始しました。私たちのサイトのDOCTYPEは正しいように見えますが、実際にはすべてのブラウザが「Quirksモード」になり、これが問題の真の原因であることを発見しました。 jQueryが互換モードの問題をサポートしているとは思えないので、これが修正されることはないと思います。

私の現在のDOCTYPE：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

それがどうあるべきか：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

この古いDOCTYPEでも機能しました：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">

したがって、DOCTYPEが<!DOCTYPE html>のHTML 5値でなければならないということではなく、IE7を他の値に設定する有効なDOCTYPE（HTML 4または5-XHTMLについては不明）でなければならないということです癖モード（Firefoxはどちらの方法でも問題なく動作します）。見る：

http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types

私のサイトのDOCTYPEを変更するオプションがないため、自動高さなどの別のソリューションを使用する必要があります。 jQuery Dialogを使用するとき、癖と標準モードの間に他の違いがあることに気付いたので、それらにも対処する必要があります（つまり、フォントサイズのパーセンテージは、IE7とFirefoxの両方で異なる方法で累積されます）。

19
juanitogan

私も同じ問題に遭遇しました。はい、高さを指定しないことで、IEはダイアログボックスのサイズを変更してその内容を表示します。ただし、内容が長くなるにつれてモーダルダイアログボックスが拡大し続けるのは望ましくありません。理想的な高さが指定されたダイアログボックスを表示し、ユーザーはスクロールバーを使用してコンテンツを表示できます。これはFireFoxで完全に機能します。IEのソリューションはありますか？

4
Monte Chan

私はこのように高さにユニットを与えることでこれを修正することができました：

$(id).dialog({ modal: true, height: h + "px", width: w });

Doctypeをいじる必要はありませんでした。これは、IE8、jQuery 1.4.4、およびjQuery UI 1.8.9に関するものです。

-これをすぐに投稿しました。それはFirefoxでそれを壊します。私を無視！

0
Dude

ピクセル単位のフォントサイズを使用すると、同様の問題が発生しました。 font-size：11px-font-size：15px; cssでie9の高さの問題が発生しました。 font-size：16px; IE9で正常に動作します

0
Mössler