IE6 のブラウザーで div が選択ドロップダウンボックスをカバーできない理由の解決策_html/css

IE6 のブラウザーで div が選択ドロップダウンボックスをカバーできない理由の解決策_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:41:44

オリジナル

1264 人が閲覧しました

IE6 ブラウザでは、div は選択ドロップダウンボックスをカバーできません。解決策:
IE6 ブラウザでは、選択ドロップダウンボックスを div でカバーできません。これは、他の主流ブラウザでは正常です。この問題を解決する方法を簡単に紹介します。
デフォルト状態での IE6 のパフォーマンス:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>IE6下无法覆盖select-蚂蚁部落</title><style type="text/css">.mydiv{  width:300px;  height:300px;  position:absolute;  background-color:green;  left:50px;}</style></head><body><div class="mydiv"></div><div><select name="myselect">  <option value="1">div+css专区</option>  <option value="2">jQuery专区</option></select></div></body></html>

ログイン後にコピー

上記のコードは、IE6 ブラウザーでこの問題を示しますが、他の主流のブラウザーでは正しく表示されます。
解決策:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>IE6下无法覆盖select-蚂蚁部落</title><style type="text/css">.mydiv{  width:300px;  height:300px;  position:absolute;  background-color:green;  left:50px;  z-index:6;}.myframe{  width:300px;  height:300px;  border:none;  position:absolute;  left:50px;  z-index:5;  filter:alpha(opacity=0);}</style></head><body><div class="mydiv"></div><select name="myselect" style="position:absolute;z-index:4">  <option value="1">div+css专区</option>  <option value="2">jQuery专区</option></select><!--[if lte IE 6]><iframe class="myframe"></iframe><![endif]--></body></html>

ログイン後にコピー

解決策分析:
div は選択ドロップダウンボックスをカバーできませんが、iframe は選択ドロップダウンボックスをカバーでき、div は 3 つの要素のいくつかの系列カバレッジ関係を通じて iframe をカバーできます。望むものを達成する効果。実装手順は次のとおりです:
1. 選択ドロップダウンボックスをカバーする div と同じサイズの iframe 要素を作成します。そして現在のブラウザがIE6かどうかでiframeが有効かどうかを判断します。
2. div、select、iframe 要素はすべて絶対配置を使用し、これら 3 つがドキュメントフローから外れて相互にカバーできるようにします。
3. z-index 属性を使用して、3 つの要素のカバレッジ関係を決定します。

元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0429/417.html