HTML表單元素覆蓋樣式元素問題及其補救之道

2020-10-23 18:54:17

字體：大中小

來源：轉載

供稿：網友

在設計HTML頁面的過程中經常會遇到表單元素覆蓋樣式元素引起的問題，圖一就是一個典型的例子。不要小看這個貌似“低級”的問題，即使一些規模較大的網站上類似的問題也絕不鮮見。本文探討了造成這一問題的根本原因，并提出一種補救辦法――之所以說補救辦法而不是一勞永逸的解決辦法，是因為微軟和NetScape這兩個巨頭也還沒有對策。

一、HTML元素的顯示優先級

　　HTML中常用的表單元素包括：文本區域（TEXTAREA），列表框（SELECT），文本輸入框（INPUT type=text），密碼輸入框（INPUT type=password），單選輸入框（INPUT type=radio），復選輸入框（INPUT type=checkbox），等等。常見的非表單元素包括：鏈接標記（A），DIV標記，SPAN標記，TABLE標記，等等。表單元素覆蓋樣式元素的根本原因在于HTML元素默認的顯示優先級規則，例如：幀元素總是比其他HTML元素優先，因此也總是顯示在最前面；表單元素總是比所有非表單元素優先。

　　所有這些HTML元素又可以根據其顯示要求分成兩類，即有窗口的HTML元素（Windowed Element），無窗口的HTML元素（Windowless Element）。有窗口的元素包括：SELECT元素，OBJECT元素，插件，IE 5.01以及更早版本中的IFRAME元素。無窗口的元素包括：大多數的普通HTML元素，如鏈接和TABLE標記，除了SELECT元素之外的大多數表單元素，NS6+/IE 5.5以及更高版本中的IFRAME元素。本文討論的問題主要與有窗口的HTML元素有關，問題的癥結其實就在于操作系統默認總是把有窗口的元素顯示在無窗口的元素前面。

　　二、瀏覽器類型與顯示優先級

　　按照瀏覽器類型比較，HTML元素的顯示次序也有所不同，總結如下：

　?、?Netscape/Mozilla

　　在NS瀏覽器6.0以前的版本中，表單元素總是比其他HTML元素有更高的優先級。但在NS 6+瀏覽器中，IFRAME元素和所有表單元素的顯示次序或者由CSS的z-index屬性值確定，或者由它們在HTML頁面中出現的次序確定，但SELECT元素除外。

　?、?Internet Explorer

　　在最新的IE瀏覽器（6.0）中，IFRAME元素和所有表單元素根據z-index屬性值或它們在HTML頁面中出現的次序來確定顯示優先次序，但SELECT元素除外。

　?、?Opera

　　在最新的Opera（7.10*）瀏覽器中，包括SELECT在內的所有表單元素根據z-index屬性或它們在HTML頁面中的出現次序來確定顯示優先級。但是，最新的Opera瀏覽器不將IFRAME作為無窗口元素顯示，IFRAME被看做有窗口元素，在顯示次序上要比所有無窗口元素優先。

　　三、CSS的z－index屬性

　　我們知道，CSS的z-index屬性可以用來控制任意HTML元素顯示時的覆蓋次序。當多個HTML元素重疊在同一空間中時，z-index值較大的元素將覆蓋z-index值較小的元素。

　　但z-index屬性值不是萬能的。如前所述，有窗口的元素總是顯示在無窗口元素的前面，z-index屬性值只有在同一類元素之間才起決定作用。形象地說，有窗口元素和無窗口元素就像畫在同一瀏覽器窗口的兩塊不同畫布上，兩類元素分別自成體系，它們的z-index屬性也只相對于同一畫布上的其他元素起作用。

　　四、補救之道

　　就目前的瀏覽器而言，一種比較有效的補救辦法是：當無窗口元素需要覆蓋有窗口元素時，運用腳本程序動態地隱藏有窗口元素。下面是一個完整的例子：

<html><head>
<style type="text/css">
.menuBlock{position:relative;top:14px;width:165px;border:2px solid black;}
#subMenus{position:relative;left:15px;top:15px;width:171px;
padding-left:2px;padding-right:2px;border:2px solid black;
z-index:100;visibility:hidden;}
#lb_1{position:absolute;left:10px;top:40px; }
</style>

<script type="text/javascript">
var isActive = false;

function showMenu(){
isActive = true;
//document.getElementById("lb_1").style.visibility="hidden";
document.getElementById("subMenus").style.visibility="visible";
}

function hideMenu(){
isActive = false;
setTimeout('hide()',100);
}

function hide(){
if(!isActive){
document.getElementById("subMenus").style.visibility = "hidden";
document.getElementById("lb_1").style.visibility="visible";
}
}

function setStyle(menuItem){
isActive = true;
menuItem.style.backgroundColor = "Gray";
menuItem.style.color = "#FFFFFF"
}

function setDefault(menuItem){
isActive = false;
menuItem.style.backgroundColor = "";
menuItem.style.color = ""
hideMenu();
}
</script></head><body>

<div id="main" style="position:absolute;width:200px;">
<div id="menuBlock" class="menuBlock" onmouseover="showMenu();"
onmouseout="hideMenu();">CSS菜單</div>
<div id="subMenus" >
<div id="0" onmouseover="setStyle(this)"
onmouseout="setDefault(this)" >菜單項目一</div>

</div><P>
<select id="lb_1" name="lb_1">
<option value="-1"/>選擇列表
　
</select>
</div>
</body></html>

　　頁面的<STYLE>部分定義了三個樣式，分別用于菜單條、菜單項目、選擇列表，通過樣式定義保證菜單、選擇列表的顯示區域重疊。<BODY>部分包含菜單和<SELECT>選擇列表的定義。當鼠標經過菜單條時，JavaScript函數showMenu執行，顯示出菜單，同時隱藏SELECT選擇列表。鼠標離開后，hideMnu函數隱藏菜單，同時恢復選擇列表。其余幾個JavaScript函數主要用于模擬菜單動作，鼠標經過菜單項時以高亮度顯示菜單（setStyle函數），鼠標離開菜單項目時則將它恢復默認顯示形式（setDefault函數）。頁面的運行效果如圖二所示。將showMenu函數中的document.getElementById("lb_1").style.visibility="hidden"語句注釋掉就可以看到圖一的效果。

<descript>
<img src=/cce/img/553/04601t02.jpg>
</descript>