ウェブページのドロップダウンリストとdivレイヤーのカバーの問題を選択する

HTML の select 要素に関する質問は、さまざまな場所で提起されています。最近のプロジェクトで、select 要素に関する 2 つの小さな問題に遭遇しました。以下に概要を示します。最初の問題はよく知られているものです。一般的な div フローティングレイヤーは、IE6 では選択要素をカバーすることができません。まず、次の例を示します。注: FirFox と IE7 で見ると、HTML の select 要素に関する問題がさまざまな場所で発生しています。少し前のプロジェクトで、select 要素に関する 2 つの小さな問題に遭遇しました。以下に要約を示します。
関連記事: div レイヤーがフラッシュレイヤーによって覆われる問題に対する最初の解決策は、より有名なものです。一般的な div フローティングレイヤーは、IE6 で選択要素を覆うことができません。まず、次の例を示します。
ウェブページのドロップダウンリストとdivレイヤーのカバーの問題を選択する

注: FirFox と IE7 で見ると、結果は同じです。フローティングレイヤー A、B、C はすべて正常に表示され、下の選択要素をカバーします。ただし、IE6 では、3 つの異なる状況があります。フローティングレイヤー A は正常のままです。フローティングレイヤー B の本体は選択要素をカバーしますが、フローティングレイヤーの境界は選択要素をカバーすることができません。フローティングレイヤー 3 は選択要素をまったくカバーできません。この現象が発生する理由は、IE6 ではブラウザが select 要素をウィンドウレベルの要素と見なすためです。このとき、div などの通常の要素は、z-index をどれだけ高く設定しても select 要素を覆うことはできません。ただし、同じくウィンドウレベルの要素である iframe で select を覆うことはできます。上記の例では、このようになっています。フローティングレイヤー C は単なる div フローティングレイヤーです。ここでは説明しません。フローティングレイヤー B の構造を直接見てみましょう。
<div class="containDiv" > <iframe class="maskIframe" ></iframe> <div class="mainDiv" >フローティングレイヤー B</div> </div>
div を使用して、実際のコンテンツ div と iframe 要素を組み合わせます。対応するスタイルは次のとおりです。
.containDiv{位置: 絶対; 上: 140px; 左: 60px; } .maskIframe{位置: 絶対; 左: -1px; 上: -1px; z-index: -1;境界線: 1px solid #000;高さ: 50px;幅: 50px;_高さ: 48px;_幅: 48px;} .mainDiv{背景: #EBAC3B;幅: 50px;高さ: 50px;}
フローティングレイヤー B は、iframe を使用して containDiv に絶対配置し、z-index: -1; を設定してから、実際にコンテンツを保持する mainDiv が iframe を覆うようにします。このとき、iframe は select 要素を覆うことができ、間接的に mainDiv が select 要素を覆うようになります。ただし、フローティングレイヤー B はまだ完璧ではありません。その理由は、ここでのフローティングレイヤー B の境界線は iframe の境界線を使用しているためです。iframe 自体は選択範囲を覆うことができますが、境界線は覆うことができないため、フローティングレイヤー B の状況が発生します。
フローティングレイヤー A はこの問題を解決し、理想的な効果を実現します。基本的にはフローティングレイヤー B と同じですが、iframe を mainDiv より上下左右に 1px 大きくし、mainDiv に境界線を設定します。このように、フローティングレイヤーの境界線は mainDiv によって提供され、境界線とともに mainDiv 全体が iframe 上にあるため、理想的な効果が実現されます。
select に関する 2 番目の問題は、IE でオプションオプションを動的に生成する問題です。上記の 2 番目の質問の例を見ると、(FF のみ) リンクをクリックすると、FF では 3 つのオプション要素を select 要素に追加できますが、IE では追加できません。一方、(ユニバーサル) リンクをクリックすると、IE と FF の両方で 3 つのオプション要素を select 要素に追加できます。その理由は、最初のリンクがselect要素のinnerHTML属性を通じてoption要素に追加されるからです。
document.getElementById("addSelect").innerHTML = "ABC";
これは FF では問題なく動作しますが、IE ではこの方法を使用して選択要素にオプションサブ要素を追加することはできません。代わりに、2 番目のリンクで提供されている方法を使用する必要があります。
document.getElementById("addSelect").options.add(新しいオプション("A","A",false,true));

<<: 複数のサーバーにNginxリバースプロキシを実装する方法

>>: 格納可能なセカンダリメニューを実装するための JavaScript