在IE中,select屬于window類型控件,它會“擋住”所有非window類型控件
可以這麼了解,div這樣的元件是在浏覽器客戶區使用代碼“渲染”的,
他們被渲染在客戶區的繪畫表面上,
而select是使用的标準windows控件,隻是作為客戶區的子控件放置而已,
它會覆寫所有客戶區繪畫表面上“畫”出來的一切,但不一定會覆寫其他類型的window控件,
比如iframe和其他的select,如果你使用過類似Delphi這樣的環境就會自然了解。
有4種辦法;
1. 修改select,不用标準select,而是自己用其他html元素模拟
2.
修改你的div,使用iframe。
3. 在div被顯示的時候或者到達select所在位置時隐藏select
4.
在div中或div的同一坐标上,用相同尺寸的iframe先遮擋一下,然後在iframe上顯示div的内容。
第4種方法的例子:
<html>
<head>
<script>
function DivSetVisible(state){
var DivRef = document.getElementById('PopupDiv');
var IfrRef = document.getElementById('DivShim');
if(state){
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}else{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body>
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div id="PopupDiv" style="position:absolute; top:25px; left:50px; padding:4px; display:none; background-color:#000000; color:#ffffff; z-index:100">
.... and a DIV can cover it up<br/>through the help of an IFRAME.
</div>
<iframe id="DivShim" src="javascript:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;">
</iframe>
<br/>
<a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>