div被選擇框select遮擋住的解決方法

原因:

  在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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章