26

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';
    }
});
4

6 に答える 6

30

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

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

于 2010-09-17T20:10:13.827 に答える
19

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

高さを auto に設定するとある程度はうまくいきますが、IE7 は依然としてコンテンツの高さを約 10 ピクセル (オブジェクトのパディング高さの可能性) だけ誤計算するため、jQuery はスクロールバーを追加します。完璧ではありませんが、次のことを考えると許容範囲です。

別の回避策が見つからなかったので、DOCTYPE ソリューションの調査を開始しました。私たちのサイトの DOCTYPE は正しいように見えますが、実際にはすべてのブラウザを「Quirks モード」にしており、これが問題の真の原因であることを発見しました。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 が の HTML 5 値でなければならないということではなく、<!DOCTYPE html>IE7 を quirks モード以外に設定する有効な DOCTYPE (HTML 4 または 5 -- XHTML については不明) でなければならないということです (Firefox はどちらでもOK）。見る：

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

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

于 2011-03-28T16:28:36.087 に答える
4

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

于 2010-09-17T17:47:59.040 に答える
0

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

于 2011-11-24T17:14:19.270 に答える
0

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

于 2009-03-11T17:58:17.793 に答える
0

次のように高さの単位を指定することで、これを修正できました。

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

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

--これを投稿するのは早かったです。それはFirefoxでそれを壊します。私を無視！

于 2011-03-04T17:27:33.637 に答える