亚洲AV中文无码字幕色下药,日本在线a一区视频

主頁(yè) > 知識(shí)庫(kù) > HTML表單元素覆蓋樣式元素問(wèn)題及其補(bǔ)救之道

HTML表單元素覆蓋樣式元素問(wèn)題及其補(bǔ)救之道

在設(shè)計(jì)HTML頁(yè)面的過(guò)程中經(jīng)常會(huì)遇到表單元素覆蓋樣式元素引起的問(wèn)題，圖一就是一個(gè)典型的例子。不要小看這個(gè)貌似“低級(jí)”的問(wèn)題，即使一些規(guī)模較大的網(wǎng)站上類(lèi)似的問(wèn)題也絕不鮮見(jiàn)。本文探討了造成這一問(wèn)題的根本原因，并提出一種補(bǔ)救辦法——之所以說(shuō)補(bǔ)救辦法而不是一勞永逸的解決辦法，是因?yàn)槲④浐蚇etScape這兩個(gè)巨頭也還沒(méi)有對(duì)策。

　　一、HTML元素的顯示優(yōu)先級(jí)

　　HTML中常用的表單元素包括：文本區(qū)域（TEXTAREA），列表框（SELECT），文本輸入框（INPUT type=text），密碼輸入框（INPUT type=password），單選輸入框（INPUT type=radio），復(fù)選輸入框（INPUT type=checkbox），等等。常見(jiàn)的非表單元素包括：鏈接標(biāo)記（A），DIV標(biāo)記，SPAN標(biāo)記，TABLE標(biāo)記，等等。表單元素覆蓋樣式元素的根本原因在于HTML元素默認(rèn)的顯示優(yōu)先級(jí)規(guī)則，例如：幀元素總是比其他HTML元素優(yōu)先，因此也總是顯示在最前面；表單元素總是比所有非表單元素優(yōu)先。

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

　　二、瀏覽器類(lèi)型與顯示優(yōu)先級(jí)

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

　?、?Netscape/Mozilla

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

　?、?Internet Explorer

　　在最新的IE瀏覽器（6.0）中，IFRAME元素和所有表單元素根據(jù)z-index屬性值或它們?cè)贖TML頁(yè)面中出現(xiàn)的次序來(lái)確定顯示優(yōu)先次序，但SELECT元素除外。

　?、?Opera

　　在最新的Opera（7.10*）瀏覽器中，包括SELECT在內(nèi)的所有表單元素根據(jù)z-index屬性或它們?cè)贖TML頁(yè)面中的出現(xiàn)次序來(lái)確定顯示優(yōu)先級(jí)。但是，最新的Opera瀏覽器不將IFRAME作為無(wú)窗口元素顯示，IFRAME被看做有窗口元素，在顯示次序上要比所有無(wú)窗口元素優(yōu)先。

　　三、CSS的z－index屬性

　　我們知道，CSS的z-index屬性可以用來(lái)控制任意HTML元素顯示時(shí)的覆蓋次序。當(dāng)多個(gè)HTML元素重疊在同一空間中時(shí)，z-index值較大的元素將覆蓋z-index值較小的元素。

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

　　四、補(bǔ)救之道

　　就目前的瀏覽器而言，一種比較有效的補(bǔ)救辦法是：當(dāng)無(wú)窗口元素需要覆蓋有窗口元素時(shí)，運(yùn)用腳本程序動(dòng)態(tài)地隱藏有窗口元素。下面是一個(gè)完整的例子：

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)" >菜單項(xiàng)目一/div>
!--共四個(gè)菜單項(xiàng)目 -->
/div>P>
select id="lb_1" name="lb_1">
option value="-1"/>選擇列表
　!-- 三個(gè)選項(xiàng) -->
/select>
/div>
/body>/html>

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

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

　　總之，表單元素覆蓋樣式元素的根源在于HTML元素默認(rèn)的顯示優(yōu)先級(jí)規(guī)則。本文介紹的補(bǔ)救辦法確實(shí)行之有效，不過(guò)如果你實(shí)在不想用這種辦法，那就只好考慮改變頁(yè)面布局，避免表單元素和樣式元素的顯示區(qū)域重疊。

標(biāo)簽：欽州呂梁海西仙桃滄州佛山攀枝花泰州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML表單元素覆蓋樣式元素問(wèn)題及其補(bǔ)救之道》，本文關(guān)鍵詞 HTML,表單,元素,覆蓋,樣式,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。