Web ページのドロップダウン リストと問題をカバーする div レイヤーを選択_HTML/Xhtml_Web ページの制作

HTML の select 要素に関する質問は、さまざまな場所で提起されています。少し前のプロジェクトで、select 要素に関する 2 つの小さな問題に遭遇しました。その概要を次に示します。 1 つ目は、より有名な問題です。IE6 では、一般的な div フローティング レイヤーは選択要素をカバーできません。まず、次の例を示します。 注: FireFox および IE7 で表示すると、
HTML の select 要素に関する問題は、さまざまな場所で提起されています。少し前のプロジェクトで、偶然 select 要素に関する 2 つの小さな問題に遭遇しました。
関連記事：divレイヤーがFlashレイヤーに覆われてしまう問題の解決策
1 つ目は、より有名なものです。IE6 では、一般的な div フローティング レイヤーは select 要素をカバーできません。まず、次の例が提供されます。

注: FireFox と IE7 で確認すると、結果は同じです。フローティング レイヤー A、B、C はすべて正常に実現できます。つまり、これらは下の select 要素をカバーします。ただし、IE6 では、フローティング レイヤー A は正常ですが、フローティング レイヤー B の主要部分は選択要素を部分的にカバーしますが、フローティング レイヤーの境界線は選択要素をカバーできません。まったく要素。この現象が発生するのは、IE6 ではブラウザが select 要素をウィンドウ レベルの要素として扱うためです。このとき、z-index がどんなに高く設定されていても、div やその他の通常の要素では select 要素をカバーできません。上の例に示すように、ウィンドウ レベル要素の iframe の選択を同時に使用できます。フローティング レイヤー C は単なる div フローティング レイヤーです。ここでは詳しく説明しません。フローティング レイヤー B の構造だけを見てみましょう。

フローティングレイヤーB

div を使用して、実際に必要なコンテンツ div と iframe 要素をまとめます。対応するスタイルは次のとおりです。
.containDiv{位置: 絶対; 上: 140 ピクセル; .maskIframe{位置: 絶対; 左: -1px; 上: -1px; 境界線: 1px; 高さ: 50px; 幅: 50px; _高さ: 48px; _幅: 48px;} .mainDiv{背景:#EBAC3B;幅:50px;高さ:50px;}
フローティング レイヤー B は、iframe を使用して containsDiv を絶対的に配置し、z-index: -1; を設定します。その後、実際にコンテンツを含む下の mainDiv が iframe をカバーできるようにします。この時点で、iframe は select をカバーできます。 mainDiv は間接的に select 要素もカバーします。しかし、フローティング レイヤー B はまだ完全ではありません。その理由は、ここでフローティング レイヤー B の境界線が iframe 境界線を使用しているためです。iframe 自体は選択範囲をカバーできますが、その境界線はカバーできないため、フローティング レイヤー B の状況が現れます。
フローティング レイヤー A はこの問題を解決し、理想を実現します。基本的にフローティング レイヤー B と同じですが、iframe を mainDiv の上下左右より 1 ピクセル大きくし、mainDiv に境界線を与えます。 、フローティングレイヤーのボーダーがmainDivによって提供され、mainDiv全体とボーダーがiframeの上にあるため、理想的な効果が達成されます。
select に関する 2 番目の問題は、IE でのオプションの動的生成の問題です。上記の 2 番目の質問の例を見ると、(FF のみ) リンクをクリックすると、FF の下の select 要素に 3 つのオプション要素を追加できますが、(ユニバーサル) リンクをクリックすると機能しません。 IE、FF 以下のselect要素に3つのoption要素を追加できます。その理由は、最初のリンクが select 要素の innerHTML 属性を通じて option 要素に追加されるためです。
document.getElementById("addSelect").innerHTML = "ABC";
これは FF では問題ありませんが、IE ではこのメソッドを使用してオプションのサブ要素を select 要素に追加することはできません。代わりに、2 番目のリンクで提供されるメソッドを使用する必要があります。
document.getElementById("addSelect").options.add(new Option("A","A",false,true));