IE6有个bug,不论如何设div的z-index, IE6的select总会显示在最前,我们都无法使用DIV遮挡住select元素。
今天写了个类,解决了这个问题,先贴上代码,然后写如何使用:
namespace:
if (typeof(rdcjs) == "undefined") _rdc = rdcjs = {};
IE6SelectHelper class:
_rdc.IE6SelectHelper = function(){ this.selectList = new Array(); } _rdc.IE6SelectHelper.prototype = { isInRange : function( elem, containerId ){ //alert(this.idAs); var containerDiv = document.getElementById( containerId ); if( !containerDiv ) return false; //as_asName_txtSuggestBoxasName var elemX1 = this.getX( elem ); var elemY1 = this.getY( elem ); var elemX2 = elem.offsetWidth + elemX1; var elemY2 = elem.offsetHeight + elemY1; var containerX1 = this.getX( containerDiv ); var containerY1 = this.getY( containerDiv); var containerX2 = containerDiv.offsetWidth + containerX1; var containerY2 = containerDiv.offsetHeight + containerY1; if( elemX1 < containerX1 && elemX2 < containerX1 ) return false; if( elemX1 > containerX2 && elemX2 > containerX2 ) return false; if( elemY1 < containerY1 && elemY2 < containerY1 ) return false; //alert( "elemY1: " + elemY1 + "elemY2: " + elemY2 + "containerY2:" + containerY2 ); if( elemY1 > containerY2 && elemY2 > containerY2 ) return false; //alert(6); return true; } , hideSelect : function( containerId ){ if ( this.msieversion() <= 6 && document.all ){ var selects = document.getElementsByTagName("select"); for( var i = 0; i < selects.length; i++ ){ var oneSelect = selects[i]; if( !this.isInRange( oneSelect, containerId ) ) continue; if( oneSelect.style.visibility != "hidden" ){ oneSelect.style.visibility = "hidden"; this.selectList.push( oneSelect ); } } /* alert("show! " + "clientWidth:" + this.fld.clientWidth + " clientHeight:"+ this.fld.clientHeight + " offsetWidth:" + this.fld.offsetWidth + " offsetHeight:" + this.fld.offsetHeight + " curLeft:" + getX( this.fld ) + " curTop:" + getY( this.fld ) );*/ } } , showSelect : function(){ for( var i = 0; i < this.selectList.length; i++ ) this.selectList[i].style.visibility = "visible"; while( this.selectList.length > 0 ) this.selectList.pop(); } , getX : function( oElement ) { var iReturnValue = 0; while( oElement != null ) { iReturnValue += oElement.offsetLeft; oElement = oElement.offsetParent; } return iReturnValue; } , getY : function( oElement ) { var iReturnValue = 0; while( oElement != null ) { iReturnValue += oElement.offsetTop; oElement = oElement.offsetParent; } return iReturnValue; } , msieversion : function() { var ua = window.navigator.userAgent var msie = ua.indexOf ( "MSIE " ) if ( msie > 0 ) // If Internet Explorer, return version number return parseInt (ua.substring (msie+5, ua.indexOf (".", msie ))) else // If another browser, return 0 return 0 } }
如何使用:
非常简单,首先创建instance:
var ie6select = new _rdc.IE6SelectHelper();
隐藏特定div或其他html element遮盖下的select:
ie6select.hideSelect( someDivId );
重新显示html element遮盖下的select:
ie6select.showSelect();
源代码下载: