IE6 の select を div でカバーできないバグの解決方法

div を使用してマスクを作成したり、ポップアップウィンドウをシミュレートしたりします。ただし、IE6 では、div の下にドロップダウンリストボックスの選択要素がある場合、ドロップダウンリストボックスが div を突き抜けて div 上に表示されます。この問題は、z-index 値に関係なく発生します。この問題は、ドロップダウンリストコントロールのポップアップドロップダウンリストが原因である可能性があり、これにより Z 軸の高さが制御不能になります。しかし、IE6 には不思議なロジックがあり、div は select を覆うことはできませんが、iframe は select を覆うことができ、div は iframe を覆うことができます。そのため、解決策としては、Z 軸の高さが高い iframe 要素を使用してドロップダウンリストボックスコントロールをラップまたは覆い、通常の Z 軸の高さに戻すことができます。

HTML は次のとおりです。
HTMLコード

コードをコピー

コードは次のとおりです。

<div id="acontainnerbox" class="aboxinitcss">
ここにたくさんのコードがあります。
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>

コードをコピー

コードは次のとおりです。

<div id="acontainnerbox" class="aboxinitcss">
ここにたくさんのコードがあります。
<iframe class="ifhideselect" frameborder="0"></iframe>
</div>

CSS コードは次のとおりです。
HTMLコード

コードをコピー

コードは次のとおりです。

.aboxinitcss{
位置:絶対;
上マージン:0px;
左マージン:0px;
表示:なし;
背景:#FFF;
境界線:実線 #CCC 1px;
パディング:30px;
zインデックス:9999;
幅:620px;オーバーフロー:非表示;
}
.ifhideselect{
zインデックス:-1;
幅:680ピクセル;
高さ:255px;
位置:絶対;
境界線:0;
左:0;
トップ:0;
}
.aboxinitcss{
位置:絶対;
上マージン:0px;
左マージン:0px;
表示:なし;
背景:#FFF;
境界線:実線 #CCC 1px;
パディング:30px;
zインデックス:9999;
幅:620px;オーバーフロー:非表示;
}
.ifhideselect{
zインデックス:-1;
幅:680ピクセル;
高さ:255px;
位置:絶対;
境界線:0;
左:0;
トップ:0;
}

これによりこのバグは解決されます。
iframe の z-index は負の数に設定する必要があります。そうしないと、カバーされません。

<<: CSS におけるスタックコンテキストの具体的な使用法

>>: HTML内の画像はbase64でエンコードされた文字列に直接置き換えられます