原因:
在IE中,select屬於window類型控件,它會“擋住”所有非window類型控件可以這麼理解,div這樣的組件是在瀏覽器客戶區使用代碼“渲染”的,他們被渲染在客戶區的繪畫表面上而select是使用的標準windows控件,只是作爲客戶區的子控件放置而已,它會覆蓋所有客戶區繪畫表面上“畫”出來的一切,但不一定會覆蓋其他類型的window控件,比如iframe和OBJECT。IE7解決了此類BUG。
解決方案:
在DIV中加入如下代碼:
<iframe src="" frameborder="0" style="position:absolute; visibility:inherit; top:0px; left:0px; width:expression(this.parentNode.offsetWidth); height:expression(this.parentNode.offsetHeight); z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
實例:可拖動DIV浮動於Select控件上
<html>
<head>
<style type="text/css">
div{
font-size:12px;
}
</style>
<script type="text/javascript">
function drag(elementToDrag, event){
var startX = event.clientX, startY = event.clientY;
var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;
var deltaX = startX - origX, deltaY = startY - origY;
if(document.addEventListener){
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}else if(document.attachEvent){
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove", moveHandler);
elementToDrag.attachEvent("onmouseup", upHandler);
elementToDrag.attachEvent("onlosecapture", upHandler);
}
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
if(event.preventDefault) event.preventDefault();
else event.returnValue = false;
function moveHandler(e){
if(!e) e = window.event;
elementToDrag.style.left = (e.clientX - deltaX) + "px";
elementToDrag.style.top = (e.clientY - deltaY) + "px";
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
function upHandler(e){
if(!e) e = window.event;
if(document.removeEventListener){
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}
else if(document.detachEvent){
elementToDrag.detachEvent("onlosecapture", upHandler);
elementToDrag.detachEvent("onmouseup", upHandler);
elementToDrag.detachEvent("onmousemove", moveHandler);
elementToDrag.releaseCapture();
}
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
}
var show = true;
function closeDiv(obj){
if(show){
document.getElementById("sowftphone").style.display = "none";
obj.innerHTML = "展開";
show = false;
}else{
document.getElementById("sowftphone").style.display = "block";
obj.innerHTML = "摺疊";
show = true;
}
}
</script>
</head>
<body>
<div id="phonediv" style="position: absolute; left: 100px; top: 100px; width: 900px; z-index: 2; background-color: white; border: solid 1px #aaa; font-weight: bold">
<div
style="background-color: #eee; border-bottom: solid 1px #aaa; padding: 3px; cursor: move;filter:ALPHA(opacity=0); "
onmousedown="drag(this.parentNode, event);">
標題
<span id="closeSpan" onclick="closeDiv(this)" style="position: relative;left: 780px;cursor: pointer;z-index: 100">摺疊</span>
</div>
<div style="padding: 5px;height:50px;" id="sowftphone" >
替換自己的內容
</div>
<iframe src="" frameborder="0" style="position:absolute; visibility:inherit; top:0px; left:0px; width:expression(this.parentNode.offsetWidth); height:expression(this.parentNode.offsetHeight); z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
</div>
<select>
<option>aaaaa</option>
</select>
<body>
</html>