ホームページ > 記事 > ウェブフロントエンド > IE7 と IE6_html/css_WEB-ITnose の z-index 属性の互換性の問題
IE7 と IE6_html/css_WEB-ITnose の z-index 属性の互換性の問題
- WBOYオリジナル
- 2016-06-24 11:30:541188ブラウズ
IE7 および IE6 における z-index 属性の互換性の問題:
位置決めされた要素は z-index 属性を使用できますが、特定のブラウザ互換性の問題があります。質問しないでください。これは基本的に IE ブラウザの下位バージョンです。 . 犯罪歴が多すぎるため、以前のバージョンのブラウザを使用するユーザーは減少していますが、数年後にはなくなると思いますが、結局のところ、このインデックスはまだ存在しています。属性には、IE7 および IE6 ブラウザーでの互換性の問題があります。
コード例は次のとおりです:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#a{position:relative;}#a-1{ position:absolute; z-index:100; width:100px; height:100px; background:red;}#b{position:relative;}#b-1{ position:absolute; z-index:10; width:40px; height:40px; background:black;}</style></head><body><div id="a"> <div id="a-1"></div></div> <div id="b"> <div id="b-1"></div></div></body></html>
特記事項: テストのために上記のコードをローカルにコピーして貼り付けることが最善です。そうしないと、効果が正しく表示されない可能性があります。
標準ブラウザまたは IE8 以降でコードを実行すると、赤が黒を覆うことができますが、IE7 以下ではこの問題を解決する方法があります。 a 要素と b 要素の両方を追加します。これは、標準ブラウザまたは IE8 および IE8 以降のブラウザでは、位置決め要素に z-index 属性値が設定されていない場合、この値がデフォルトで auto になるためです。一方、IE7 および IE6 では、この値がデフォルトで自動になります。 、この値は 0 です。この現象は、z-index 階層ツリーなどの関連する原則に従って発生します。詳細については、CSS での z-index 属性の使用法と z-index の互換性の問題の詳細な説明を参照してください。 IE6とIE7では。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=11598
詳細については、以下を参照してください: http://www.softwhy.com/divcss/