解決DIV在IE6下無法遮蓋select
你對(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，原因是在IE6下，瀏覽器將select元素視為窗口級(jí)元素，這時(shí)DIV或者其它的普通元素?zé)o論z-index設(shè)置的多高都是無法遮住select元素的。#p#
網(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)行]
【編輯推薦】
- 深入探究IE8和IE7的24個(gè)區(qū)別
- 探究IE8與IE7具體功能中窗口功能按鈕的變化
- 剖析Margin和Padding屬性中四個(gè)值的先后順序及區(qū)別
- 九步輕松解決IE6的各種疑難雜癥
- 技術(shù)前沿 一段JS代碼輕松解決IE6-IE8的兼容性問題
