解決DIV在IE6下無法遮蓋select

作者：admin 2010-08-19 14:43:49

本文和大家討論一下關于select元素的一個問題，那就是一般DIV浮層在IE6下無法遮蓋select標簽，但是IE7和Firefox下DIV都可以遮住select標簽。

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

JavaScript巧解IE6 IE7 IE8兼容問題

這次討論一下關于select元素的一個問題，其實很早以前我就碰到過關于select元素的問題，這次做網站又被問到同樣的問題，就是：一般DIV浮層在IE6下無法遮蓋selectaspxhome.com/search.asp?keyword=%b1%ea%c7%a9" target=_blank>標簽，IE7和FF下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>無標題文檔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>測試選項option> 
  <option>測試選項2option> 
  <option>測試選項3option> 
select> 
label> 
form> 
body> 
html>

[提示：你可先修改部分代碼，再按運行]

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

網上有兩種解決辦法：

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

◆ 用select同級別元素：iframe標簽，然后用實際的浮動層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>無標題文檔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>測試選項option> 
  <option>測試選項2option> 
  <option>測試選項3option> 
select> 
label> 
form> 
body> 
html>

[提示：你可先修改部分代碼，再按運行]

【編輯推薦】

深入探究IE8和IE7的24個區(qū)別
探究IE8與IE7具體功能中窗口功能按鈕的變化
剖析Margin和Padding屬性中四個值的先后順序及區(qū)別
九步輕松解決IE6的各種疑難雜癥
技術前沿一段JS代碼輕松解決IE6-IE8的兼容性問題

責任編輯：佚名來源： aspxhome.com