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

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

質問

新しいjQuery 1.3.2およびjQuery-ui-1.7ライブラリとUIダイアログを使用しています。いくつかのフォーム要素（テキストボックス、チェックボックスなど）を含む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';
    }
});
役に立ちましたか？

解決 6

私は自分の質問に答えました。ダイアログの高さプロパティとダイアログ内のいくつかの要素をいじるだけでした。お電話ください！

他のヒント

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

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

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

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

別の回避策が見つからなかったため、DOCTYPEソリューションの調査を開始しました。私たちのサイトのDOCTYPEは（正しいように見えますが）実際にすべてのブラウザーを<！> quot; Quirks Mode <！> quot;に置くことを発見しました。そして、これが問題の真の原因であること。 jQueryはquirksモードの問題をサポートしているとは思わないので、これが修正されることはないでしょう。

現在の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について不明）でなければなりませんquirksモード（Firefoxはどちらの方法でも動作します）よりも。参照：

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

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

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

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

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

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

-これをすぐに投稿しました。それはFirefoxでそれを壊します。無視してください！

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top