2

CSS を使用して IE でスタイルを設定できないため、デフォルトの選択コントロールが嫌いです。これが、HTML + CSS + JavaScript を使用して、新しい選択コントロールをゼロから開発した理由です。過去 2 日間、CSS と HTML を一致させるという素晴らしい仕事をしましたが、今日、修正するのが非常に難しいと思われるバグを発見しました。

IE 7 では、同じページに 2 つのコントロールがある場合、上からのコントロールが下からのコントロールをオーバーレイしません。

画像を参照してください: coolrgb dot com/files/select-help.jpg

デモ ページ (HTML + CSS + Javascript) をダウンロード: coolrgb dot com/files/select-help.zip

私を助けてください、このコントロールは私にとってとても素敵に見えます、そして私は今から私のすべてのプロジェクトでそれを使いたいと思っています. このバグは私の希望と多くの時間を殺しました。

ありがとうございました。

4

2 に答える 2

3

編集：質問を読み直した後、この回答は完全に無関係のように見えますが、とにかくここに保持しています。

実際には答えではありませんが、説明する試み：

Internet Explorerでは、<select>タグは単純なウィンドウコントロールとして実装されますが、他のすべての要素はウィンドウレスコントロールです（これにより、スタイルを設定できます）。そのため、これらのタグは常に最上位にあり、zオーダーのルールに従っていません。（ドロップダウンメニュー部分は、ウィンドウのないコントロールになるようにスタイルを設定できる必要があります。したがって、メイン部分の下に表示されます。）

Firefoxではすべての要素がウィンドウレスであり、IE8ではウィンドウレスである必要があります。

于 2009-05-31T19:24:21.127 に答える
3

各コントロールに同じz-indexを指定すると、スタックの順序を制御できなくなります。

コントロールを実際のSELECT要素のように動作するように変更することをお勧めします。一度に開くことができるのは1つだけです。フォーカスを失うと、コントロールが閉じます。または、コントロールにフォーカスがある場合は高いzインデックスを設定し、フォーカスがない場合は低いzインデックスを設定できます。

注意すべきもう1つのこと：ラジオ、チェックボックスなどの他のコントロールを配置して、コントロールの下で選択してみてください。（@grawityが彼の回答で説明しているように）別のz-indexを指定しても、IEはそれらの上にカーソルを合わせないことに気付くかもしれません。これが、http： //jqueryui.com/demos/dialog/に示すように、通常、これらの要素の上にウィジェットのデモが表示される理由です。

これを修正するための典型的なハックはiframeを使用することですが、それはおそらくまったく別の質問に値します。

于 2009-05-31T19:29:49.977 に答える