<< flash在div overflow hidden的显示问题 | Home | 正确设置绝对定位的dom元素的位置 >>

用脚本修复IE6 select overlap bug(遮盖问题)

IE6有个bug，不论如何设div的z-index, IE6的select总会显示在最前，我们都无法使用DIV遮挡住select元素。

今天写了个类，解决了这个问题，先贴上代码，然后写如何使用：

namespace:

 
  1. if (typeof(rdcjs) == "undefined")  
  2.     _rdc = rdcjs = {};  
IE6SelectHelper class:
 
  1. _rdc.IE6SelectHelper = function(){  
  2.     this.selectList = new Array();  
  3. }  
  4.   
  5. _rdc.IE6SelectHelper.prototype = {  
  6.     isInRange : function( elem, containerId ){  
  7.         //alert(this.idAs);  
  8.         var containerDiv = document.getElementById( containerId );  
  9.         if( !containerDiv )  
  10.             return false;  
  11.         //as_asName_txtSuggestBoxasName  
  12.         var elemX1 = this.getX( elem );  
  13.         var elemY1 = this.getY( elem );  
  14.         var elemX2 = elem.offsetWidth + elemX1;  
  15.         var elemY2 = elem.offsetHeight + elemY1;  
  16.           
  17.         var containerX1 = this.getX( containerDiv );  
  18.         var containerY1 = this.getY( containerDiv);  
  19.         var containerX2 = containerDiv.offsetWidth + containerX1;  
  20.         var containerY2 = containerDiv.offsetHeight + containerY1;  
  21.            
  22.   
  23.         if( elemX1 < containerX1 && elemX2 < containerX1 )  
  24.             return false;  
  25.   
  26.           
  27.         if( elemX1 > containerX2 && elemX2 > containerX2 )  
  28.             return false;  
  29.   
  30.               
  31.         if( elemY1 < containerY1 && elemY2 < containerY1 )  
  32.             return false;  
  33.           
  34.   
  35.         //alert( "elemY1: " + elemY1 + "elemY2: " + elemY2 + "containerY2:" + containerY2 );  
  36.         if( elemY1 > containerY2 && elemY2 > containerY2 )  
  37.             return false;  
  38.           
  39.         //alert(6);  
  40.         return true;  
  41.     }  
  42.     ,  
  43.     hideSelect : function( containerId ){  
  44.         if ( this.msieversion() <= 6 && document.all ){  
  45.               
  46.             var selects = document.getElementsByTagName("select");  
  47.             for( var i = 0; i < selects.length; i++ ){  
  48.                 var oneSelect = selects[i];  
  49.                           
  50.                 if( !this.isInRange( oneSelect, containerId ) )  
  51.                     continue;  
  52.                       
  53.                 if( oneSelect.style.visibility != "hidden" ){  
  54.                     oneSelect.style.visibility = "hidden";  
  55.                     this.selectList.push( oneSelect );  
  56.                 }  
  57.             }  
  58.               
  59.             /* 
  60.             alert("show! "  
  61.                     + "clientWidth:" + this.fld.clientWidth   
  62.                     + " clientHeight:"+ this.fld.clientHeight  
  63.                     + " offsetWidth:" + this.fld.offsetWidth  
  64.                     + " offsetHeight:" + this.fld.offsetHeight 
  65.                     + " curLeft:" + getX( this.fld ) 
  66.                     + " curTop:" + getY( this.fld ) 
  67.                      
  68.                     );*/  
  69.         }  
  70.     }  
  71.     ,  
  72.     showSelect : function(){  
  73.         for( var i = 0; i < this.selectList.length; i++ )  
  74.             this.selectList[i].style.visibility = "visible";  
  75.           
  76.         while( this.selectList.length > 0 )  
  77.             this.selectList.pop();  
  78.     }  
  79.     ,  
  80.     getX : function( oElement )  
  81.     {  
  82.         var iReturnValue = 0;  
  83.         while( oElement != null ) {  
  84.             iReturnValue += oElement.offsetLeft;  
  85.             oElement = oElement.offsetParent;  
  86.         }  
  87.         return iReturnValue;  
  88.     }  
  89.     ,  
  90.     getY : function( oElement )  
  91.     {  
  92.         var iReturnValue = 0;  
  93.         while( oElement != null ) {  
  94.             iReturnValue += oElement.offsetTop;  
  95.             oElement = oElement.offsetParent;  
  96.         }  
  97.         return iReturnValue;  
  98.     }  
  99.     ,  
  100.     msieversion : function()  
  101.     {  
  102.       var ua = window.navigator.userAgent  
  103.       var msie = ua.indexOf ( "MSIE " )  
  104.   
  105.       if ( msie > 0 )      // If Internet Explorer, return version number  
  106.          return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))  
  107.       else                 // If another browser, return 0  
  108.          return 0  
  109.   
  110.     }  
  111.       
  112. }  

如何使用：
非常简单，首先创建instance:
 
  1. var ie6select = new _rdc.IE6SelectHelper();  

隐藏特定div或其他html element遮盖下的select:

 
  1. ie6select.hideSelect( someDivId );  
重新显示html element遮盖下的select:

 
  1. ie6select.showSelect();  
源代码下载：
点击下载

posted @ Wednesday, May 13, 2009 5:41 PM

Print

Comments on this entry:

# re: 用脚本修复IE6 select overlap bug(遮盖问题)

Left by tian at 5/13/2009 5:59 PM
Gravatar
http://docs.jquery.com/Plugins/bgiframe
jquery有个插件弄这个
解决方法好像不太一样

# re: 用脚本修复IE6 select overlap bug(遮盖问题)

Left by jinweijie at 5/14/2009 12:33 PM
Gravatar
@tian

下载了看了下，它的test好像在ie6下没用嘛。。。

# re: 用脚本修复IE6 select overlap bug(遮盖问题)

Left by 司徒正美 at 7/29/2009 3:55 PM
Gravatar
非常遗憾，没有效果……
www.cnblogs.com/.../1534076.html

Your comment:



 (will not be displayed)


 
 
 
Please add 8 and 4 and type the answer here:
 

Live Comment Preview:

 

JIN Weijie Contact

About
Syndication:

RSS ATOM

View posts by date
«March»
SunMonTueWedThuFriSat
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910