ホームページ > 記事 > ウェブフロントエンド > IE6 のブラウザーで div が選択ドロップダウン ボックスをカバーできない理由の解決策_html/css_WEB-ITnose
IE6 のブラウザーで div が選択ドロップダウン ボックスをカバーできない理由の解決策_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:441195ブラウズ
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