溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何解決DIV在IE6下無法遮蓋select

發(fā)布時(shí)間：2021-11-18 10:01:17 來源：億速云 閱讀：103 作者：柒染 欄目：web開發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何解決DIV在IE6下無法遮蓋select，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

你對(duì)DIV浮層在IE6下無法遮蓋select標(biāo)簽是否了解，這里和大家一起討論一下，其實(shí)很早以前我就碰到過關(guān)于select元素的問題，但是為什么IE7和FF下DIV都可以遮住select標(biāo)簽，會(huì)為你揭秘。

JavaScript巧解IE6 IE7 IE8兼容問題

這次討論一下關(guān)于select元素的一個(gè)問題，其實(shí)很早以前我就碰到過關(guān)于select元素的問題，這次做網(wǎng)站又被問到同樣的問題，就是：一般DIV浮層在IE6下無法遮蓋selectaspxhome.com/search.asp?keyword=%b1%ea%c7%a9" target=_blank>標(biāo)簽，IE7和FF下DIV都可以遮住select標(biāo)簽。

列舉個(gè)簡(jiǎn)單的實(shí)例闡述問題：

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標(biāo)題文檔title> <style type="text/CSS"> #warp { position:absolute; top:10px; left:26px; width:200px; height:200px;}  .box { position:absolute; top:0; left:0; width:200px;    height:200px; background:#FDF3D9; border:1px solid #EEAC53}  style> head>  <body> <DIV id="warp">   <DIV class="box">dfsagdsaDIV> DIV> <form id="form1" name="form1" method="post" action=""> <label> <select name="select" id="select">   <option>測(cè)試選項(xiàng)option>   <option>測(cè)試選項(xiàng)2option>   <option>測(cè)試選項(xiàng)3option> select> label> form> body> html>

[提示：你可先修改部分代碼，再按運(yùn)行]

如何解決DIV在IE6下無法遮蓋select

DIV在IE6下無法遮蓋select，原因是在IE6下，瀏覽器將select元素視為窗口級(jí)元素，這時(shí)DIV或者其它的普通元素?zé)o論z-index設(shè)置的多高都是無法遮住select元素的。

網(wǎng)上有兩種解決辦法：

◆當(dāng)浮動(dòng)層DIV出現(xiàn)的時(shí)候，用JS將select隱藏，當(dāng)浮動(dòng)層DIV消失的時(shí)候select恢復(fù)出現(xiàn)。這種方法早期用的比較多，這里不多介紹。

◆ 用select同級(jí)別元素：iframe標(biāo)簽， 然后用實(shí)際的浮動(dòng)層DIV和iframe放在一起。間接的使DIV遮住了select。

正確的代碼：

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標(biāo)題文檔title> <style type="text/CSS"> #warp { position:absolute; top:10px; left:26px; width:200px; height:200px;}  .box { position:absolute; top:0; left:0; width:200px;    height:200px; background:#FDF3D9; border:1px solid #EEAC53}  .box iframe {width:400px; height:400px; z-index:-1}  style> head>  <body> <DIV id="warp">   <iframe frameborder="0">iframe>   <DIV class="box">dfsagdsaDIV> DIV> <form id="form1" name="form1" method="post" action=""> <label> <select name="select" id="select">   <option>測(cè)試選項(xiàng)option>   <option>測(cè)試選項(xiàng)2option>   <option>測(cè)試選項(xiàng)3option> select> label> form> body> html>

[提示：你可先修改部分代碼，再按運(yùn)行]

如何解決DIV在IE6下無法遮蓋select

上述就是小編為大家分享的如何解決DIV在IE6下無法遮蓋select了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手