HTMLページのフォーム要素は、多くの場合、スタイル要素に起因するカバレッジ問題が発生した設計プロセスでは、図は典型的な例です。大規模なサイトのいくつかの同様の問題が珍しくありません持っているにもかかわらず、この一見「低レベル」の問題を過小評価しないでください。本論文では、問題の根本的な原因について説明し、改善策を提案 - 救済ではなく、恒久的な解決策、なぜならこれらの2つの巨人マイクロソフトとNetscapeまだ対策その理由を。
表示優先度のHTML要素の
一般的に使用されるHTMLフォーム要素が含まれる：テキスト領域（TEXTAREA）、リストボックス（SELECT）、テキスト入力ボックス（入力タイプ=テキスト）、パスワード入力ボックス（入力タイプ=パスワード）、ラジオ入力ボックス（入力タイプ=ラジオ）、チェックボックスの入力（入力タイプ=チェックボックス）などが挙げられます。一般的な非フォーム要素を含む：リンクタグ（A）、DIVタグ、SPANタグ、テーブルタグなど。フォーム要素のstyle要素の根本的な原因を覆って表示HTML要素のデフォルトの優先順位規則こと、など：フレーム要素は常に他のHTML要素に優先しますので、常に一番上に表示;フォーム要素は常に、すべての非フォーム要素に優先します。
これらのHTML要素の全てとディスプレイ要件、窓（ウィンドウ表示素子）、窓のHTML要素（ウィンドウレス要素）を有する、すなわちHTML要素に応じて2つのカテゴリに分類することができます。SELECT要素、OBJECTエレメント、プラグイン、IE 5.01およびそれ以前のバージョンでIFRAME要素：ウィンドウ要素が含まれています。窓の要素であって、SELECT要素のフォーム要素の大部分に加えて、そのようなリンクとTABLEタグとして通常のHTML要素の大部分、NS6 + / IE 5.5以降IFRAME要素。この記事では、常にデフォルトのオペレーティングシステムのウィンドウ要素はウィンドウレス要素の前面に表示されている要素が、実際には問題の嘘の核心について持っているHTMLとメインウィンドウについて説明します。
第二に、ブラウザの種類と表示優先
ブラウザ比較の種類に応じて以下に要約されるように、HTML要素の表示順序は、異なっている：
⑴のNetscape / Mozillaの
ブラウザNS 6.0以前のバージョンでは、フォーム要素は、常に他のHTML要素よりも高い優先度を持っています。しかしNS 6+ブラウザ、表示順序と、すべてのフォームのIFRAME要素または要素は、zインデックスCSSプロパティの値によって決定され、またはそれらがSELECT要素を除いて、HTMLページに表示される順序によって決定されます。
⑵Internet Explorerの
彼らはSELECT要素を除いて、HTMLページの表示優先順位に表示される最新のIEブラウザ（6.0）で、すべてのIFRAME要素のフォーム要素は、順序またはz-index属性値に応じて決定されます。
⑶オペラ
最新オペラ（7.10 *）ブラウザでは、表示優先度を含むSELECTを含むすべてのフォーム要素は、それらがHTMLページに表示されるz屈折率性や順序に従って決定されます。しかし、最新のOperaブラウザは非ウィンドウ表示としてではないIFRAME要素を行い、IFRAMEのウィンドウ要素、表示順序よりも優先順位のすべてのウィンドウレス要素として見られています。
フロントエンドの学習qun438905713を作成し、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。
三、CSSのz-index属性
私たちが知っているが、財産のCSSのZ-indexが任意のカバー表示HTML要素のシーケンスを制御するために使用することができます。HTML要素の複数の同じ空間的に重なる場合、素子の大z屈折率の値は、要素の小さいz屈折率の値をカバーします。
しかし、Z-index属性の値は万能薬ではありません。上述したように、ウィンドウの要素は同一のクラスとの間のz-index属性値のみ決定的要素なしフロントウインドウ要素に表示常にあります。比喩的に言えば、同じブラウザウィンドウの二つの異なるキャンバスに描かれた要素のように何のウィンドウとウィンドウの要素が存在しない、要素の2種類が自己完結している、彼らのz-indexプロパティのみ同じキャンバス上の他の要素との関係で作品。
第四に、道路の救済
現在のブラウザの面では、より効果的な救済策は次のとおりです。隠されたウィンドウ要素を動的にスクリプトを使用して、ウィンドウの要素ウィンドウの要素をカバーする必要がないとき。以下の完全な例である：
<HTML> <HEAD>
<スタイルタイプ= "テキスト/ CSS">
.menuBlock {位置：相対;トップ：14px;幅：165px;ボーダー：ブラックソリッド2ピクセル;}
#subMenus {位置：相対;左：15ピクセル;トップ：15ピクセル、横幅：171px;
パディング左：2ピクセル;パディング右：2ピクセル;ボーダー：2ピクセルベタ黒;
Zインデックス：100;可視性：隠されました;}
＃lb_1 {位置：絶対;左：10pxの、トップ：40ピクセル。}
</スタイル>
ます。<script type = "text / javascriptの">
VARのisActive =偽;
機能showMenu（）{
のisActive = TRUE。
//document.getElementById("lb_1").style.visibility="hidden ";
document.getElementById（ "サブメニュー"）style.visibility = "可視"。
}
関数hideMenu（）{
のisActive = FALSE;
setTimeout（ '非表示（）'、100）;
}
関数を隠す（）{
もし{（のisActive！）
のdocument.getElementById（ "サブメニュー"）style.visibility = "隠れました"。
document.getElementById（ "lb_1"）style.visibility = "可視"。
menuItem.style.backgroundColor =「グレー」。
menuItem.style.color = "#FFFFFF"
}
関数は、SetDefault（menuItemは）{
のisActive = FALSE;
menuItem.style.backgroundColor = "";
menuItem.style.color = ""
hideMenu（）。
}
</ SCRIPT> </ head> <body>
<DIV ID = "メイン"スタイル= "位置：絶対;幅：200pxの;">
<DIV ID = "menuBlock"クラス= "showMenu（=οnmοuseοver "menuBlock"） ;」
οnmοuseοut= "hideMenu（）;"> CSS菜单</ DIV>
<DIV ID = "サブメニュー">
<DIV ID = "0" οnmοuseοver= "のsetStyle（この）"
οnmοuseοut= "は、SetDefault（この）">菜单项目一</ div>
</ SELECT>
</ div>
</ BODY> </ HTML>
表示<STYLE>セクションを定義するスタイル定義メニューが保証する各メニュー項目、メニュー項目、選択リスト、のための3つのページスタイル、選択リスト領域が重なります。<BODY>セクションには、メニューや選択された定義されたの<SELECT>リストが含まれています。メニューバーの上にマウスは、JavaScript関数が実行showMenuするとSELECT選択リストを隠しながら、メニューを表示します。選択リストを復元ながらマウスは、hideMnu隠されたメニュー機能を残しました。いくつかの他のJavaScript関数は、主にアクションメニューをシミュレートするために使用され、マウスは、高輝度で、そのデフォルトの表示形式（は、SetDefault関数）にメニュー（のsetStyle関数）、マウス葉メニュー項目のリストアに表示するメニュー項目上を通過します。図IIに示されているオペレーティング結果ページ。showMenuのdocument.getElementById（「lb_1」）。Style.visibilityの機能 =「隠された」 ステートメントは、図Zhushidiaoに効果を見ることができます。
<DESCRIPT>
<IMG SRC = / CCE / IMG / 553 / 04601t02.jpg>
</ DESCRIPT>
要するに、デフォルトの表示HTML要素の優先順位のルールをカバーするフォーム要素のスタイル要素のルーツ。この記事では、本当に効果的な救済策を説明していますが、実際にこのアプローチを使用したくない場合は、それが表示領域フォーム要素とスタイル要素が重なる避けるために、ページレイアウトを変更することを検討しなければなりませんでした。
