HTMLの選択要素に関する質問は多くの場所で提起されており、少し前にプロジェクトでは、選択した要素に関する2つの小さな質問に遭遇しました。ここでそれらを要約しましょう。 1つ目は最も有名です:Divフローティング層がIE6の下の選択要素を覆うことができないという一般的な問題。最初に、次の例が提供されます。注:FirfoxとIE7の下で見た場合
HTMLの選択要素に関する質問は多くの場所で提起されており、少し前にプロジェクトでは、選択した要素に関する2つの小さな質問に遭遇しました。ここでそれらを要約しましょう。
関連記事:フラッシュレイヤーで覆われているdiv層の問題の解決策
1つ目は最も有名です:Divフローティング層がIE6の下の選択要素を覆うことができないという一般的な問題。まず、次の例が提供されています。
注:FirfoxとIE7の下での両方を見ると、結果は同じです。浮動層A、B、およびCは通常の現実になります。つまり、下の選択要素がブロックされます。ただし、IE6では、3つの異なる状況があり、浮動層Aはまだ正常です。浮遊層B本体は選択要素を覆いますが、浮動層のフレームは選択要素を覆うことはできません。フローティングレイヤー3は、選択要素をまったくカバーできません。この現象の理由は、IE6では、ブラウザが選択要素をウィンドウレベルの要素と見なすためです。現時点では、divまたは他の通常の要素は、z-indexがどれほど高く設定されていても、選択要素をカバーすることはできませんが、選択はウィンドウレベルの要素であるiframeによってブロックされます。これが上記の例です。フローティング層Cは、Divフローティング層です。ここではこれ以上話すことはありません。浮動層Bの構造を見てください。
<div class = cantaindiv> <iframe class = maskiframe> </iframe> <div class = maindiv>フローティングレイヤーb </div> </div>
DIVを使用して、実際のコンテンツDIVとIFRAME要素を一緒に配置し、対応するスタイルは次のとおりです。
.containdiv {position:absolute;トップ:140px;左:60px; } .maskiframe {position:absolute;左:-1px;上:-1px; Z -Index:-1; border:1px solid#000; height:50px; width:50px; _height:48px; _width:48px;}。maindiv {background:#ebac3b; width:50px; height:50px;}
フローティング層Bは、iframeを使用して絶対に位置し、z -indexを設定します。-1; containsdivで、その後、実際にコンテンツを置くmaindivを以下に許可して、iframeをカバーします。この時点で、iframeは選択要素をカバーでき、間接的にMainDIVが選択要素をカバーします。ただし、浮動層Bのiframe境界線がiframe境界を使用しているため、浮動層Bは依然として不完全です。 IFRAME自体はSelectをカバーできますが、その境界線はできないため、浮動層Bが発生します。
浮動層Aはこの問題を解決し、理想的な思考を達成しました。基本的には、浮遊層Bと同じですが、iframeがMainDivを上、下、左、右以上にし、MainDIVの境界線を与えることを除きます。このようにして、フローティングボーダーはMainDIVによって提供され、MainDIV全体と境界線がIFRAME上にあるため、理想的な効果が達成されます!
Selectの2番目の問題は、IEの下でオプションオプションを動的に生成する問題です。上記の2番目の質問の例を参照してください。 (限られたFF)リンクをクリックすると、FFの下の選択要素に3つのオプション要素を追加できますが、IEでは不可能です。 (一般的な)リンクをクリックすると、IEおよびFFの下の選択要素に3つのオプション要素を追加できます。その理由は、最初のリンクが選択された要素のinnerHTML属性を介してオプション要素を追加することです。
document.getElementById(addSelect).innerhtml = abc;
FFではこれに問題はありませんが、IEはこのメソッドを介して選択された要素にオプションの子要素を追加することはできませんが、2番目のリンクで提供されるメソッドが必要です。
document.getElementById(addSelect).options.add(new option(a、a、false、true));