IE6中select挡住DIV的BUG
转自http://hi.baidu.com/wolfoppa/blog/item/4b68993c1ff1e5cb9f3d62c9.html
前阵子碰到一个问题，就是在IE6中select会把浮动的DIV给挡住，通常情况都是用JS控制某个DIV显示隐藏的情况下发生的。这冲时候不管怎么设z-index值都没有用。
我也查了很多资料，说这是IE6的一个BUG（哎，万恶的IE6），解决的办法不外乎两种：1、用DIV模拟一个select出来。2、在隐藏层的底部加一个透明的iframe。第一种感觉花的工夫比较大，暂时就用第二种方法了，我这个原本用的是jquery的框架，这里我就把jquery的帖上来了。在你要调用的JS文件里加上这么一段：
(function($){$.fn.bgIframe=$.fn.bgiframe=function(s){
if($.browser.msie&&/6.0/.test(navigator.userAgent))
{s=$.extend({top:'auto',left:'auto',width:'auto',height:'auto',opacity:true,
src:'javascript:false;'},s||{});var prop=function(n){
return n&&n.constructor==Number?n+'px':n;},html='<
iframe frameborder="0"tabindex="-1"src="'+s.src+'"'+'style="display:block;
position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;
filter:alpha(opacity=0);-moz-opacity:0;"/>';
return this.each(function()
{if($('> iframe.bgiframe',this).length==0)
this.insertBefore(document.createElement(html),this.firstChild);
});}return this;};})(jQuery);
然后在你应用的页面调用
<script>
$(document).ready(function(e){
$('.your_class').bgiframe();
})//其中your_class是被挡住的层的类名。
</script> 2010-01-25 10:49
在IE中,select属于window类型控件，它会“挡住”所有非window类型控件可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，他们被渲染在客户区的绘画表面上，而select是使用的标准windows控件，只是作为客户区的子控件放置而已，它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，比如iframe和其他的select，如果你使用过类似Delphi这样的环境就会自然理解。IE7解决了此类BUG。
有多种种办法;
1. 修改select，不用标准select，而是自己用其他html元素模拟
2. 修改你的div，使用iframe。
3. 在div被显示的时候或者到达select所在位置时隐藏select
4. 在div中或div的同一坐标上，用相同尺寸的iframe先遮挡一下，然后在iframe上显示div的内容。
5.Object对象的优先度较高,可以挡住select框以下例子系
第4种方法的例子：最好的方法：iframe来当作div的底Div被Select挡住，是一个比较常见的问题。
有的朋友通过把div的内容放入iframe或object里来解决。
可惜这样会破坏页面的结构，互动性不大好。
这里采用的方法是：
虽说div直接盖不住select , 但是div可以盖iframe，而iframe可以盖select, 所以，把一个iframe来当作div的底，
这个div就可以盖住select了. <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/><br/><a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a><br/><br/><a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a></body></html>
第3种方法的例子：最直接的方法:隐藏下拉框.下面提供的是一个比较通用的一组函数:test.htm------------<script>var HideElementTemp = new Array();//点击菜单时，调用此的函数,菜单对象function cal_hideElementAll(obj){ cal_HideElement("IMG",obj); cal_HideElement("SELECT",obj); cal_HideElement("OBJECT",obj); cal_HideElement("IFRAME",obj);}function cal_HideElement(strElementTagName,obj){try{ var showDivElement = obj; var calendarDiv = obj; var intDivLeft = cal_GetOffsetLeft(showDivElement); var intDivTop = cal_GetOffsetTop(showDivElement);//+showDivElement.offsetHeight; //HideElementTemp=new Array() for(i=0;i<window.document.all.tags(strElementTagName).length; i++){var objTemp = window.document.all.tags(strElementTagName)[i];if(!objTemp||!objTemp.offsetParent) continue;var intObjLeft=cal_GetOffsetLeft(objTemp);var intObjTop=cal_GetOffsetTop(objTemp);if(((intObjLeft+objTemp.clientWidth)>intDivLeft)&& (intObjLeft<intDivLeft+calendarDiv.style.posWidth)&& (intObjTop+objTemp.clientHeight>intDivTop)&& (intObjTop<intDivTop+calendarDiv.style.posHeight)){ //var intTempIndex=HideElementTemp.length;//已经有的长度 //save elementTagName is stutas //HideElementTemp[intTempIndex]=new Array(objTemp,objTemp.style.visibility); HideElementTemp[HideElementTemp.length]=objTemp objTemp.style.visibility="hidden"; } }}catch(e){alert(e.message)}}function cal_ShowElement(){ var i; for(i=0;i<HideElementTemp.length; i++){var objTemp = HideElementTemp[i]if(!objTemp||!objTemp.offsetParent) continue;objTemp.style.visibility='' } HideElementTemp=new Array();}function cal_GetOffsetLeft(src){ var set=0; if(src && src.name!="divMain"){ if (src.offsetParent){ set+=src.offsetLeft+cal_GetOffsetLeft(src.offsetParent);}if(src.tagName.toUpperCase()!="BODY"){ var x=parseInt(src.scrollLeft,10); if(!isNaN(x)) set-=x;} } return set;}function cal_GetOffsetTop(src){ var set=0; if(src && src.name!="divMain"){ if (src.offsetParent){ set+=src.offsetTop+cal_GetOffsetTop(src.offsetParent); }if(src.tagName.toUpperCase()!="BODY"){ var y=parseInt(src.scrollTop,10); if(!isNaN(y)) set-=y;} } return set;}</script><select></select><select></select><div style="position:absolute;left:0;top:0;width:100;height:100;background-color:red" onclick="cal_hideElementAll(this)">点击让select隐藏</div><br><br><br><br><br><br><input type="button" value="点击让select显示" onclick="cal_ShowElement()">以上这种方法,如果对于select框数目少,相对固定的话,直接用obj.style.visibility="hidden"这样进行隐藏是更直接的.第2种方法：用iframe作载体以下是一简单的例子:-----------<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><title>简单菜单</title><!--提供定位函数，用iframe作载体，不会被select挡住By Fason(2003-5-21)--><style id=s>#div1{position:absolute;z-index:100;width:100;height:130;background-color:#d2e8ff;border:1 solid black;}div{cursor:hand;font-size:12px;}a{text-decoration:none;color:red;font-size:12px}</style></head><body><script>function window.onload(){var shtml=div1.innerHTML;var ifm=document.createElement("<iframe frameborder=0 marginheight=0 marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")ifm.style.width=div1.offsetWidthifm.style.height=div1.offsetHeightifm.name=ifm.uniqueIDdiv1.innerHTML=""div1.appendChild(ifm)window.frames[ifm.name].document.write(s.outerHTML+"<body leftmargin=0 topmargin=0>"+shtml+"</body>")}function show(){with(document.all.img1){x=offsetLeft;y=offsetTop;objParent=offsetParent;while(objParent.tagName.toUpperCase()!= "BODY"){x+=objParent.offsetLeft;y+=objParent.offsetTop;objParent = objParent.offsetParent;}y+=offsetHeight-1}with(document.all.div1.style){pixelLeft=xpixelTop=yvisibility=''}}function hide(){document.all.div1.style.visibility='hidden'}</script><img id=img1 onmouseover="show()" onmouseout="hide()" src="ie.gif"><br><select></select><div id=div1 onmouseover="style.visibility=''" onmouseout="style.visibility='hidden'" style="visibility:hidden;"><div href="http://www.csdn.net" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''" onclick="window.open(href)">中国程序员</div><div href="http://www.sohu.com" onmouseover="style.backgroundColor='highlight'" onmouseout="style.backgroundColor=''" onclick="window.open(href)">sohu</div></div></body></html>第5种方法：Object对象的优先度较高,可以挡住select框<OBJECT id=aa style="display:none;z-index:1000; position:absolute; top:0; left:0; width:152; height: 200;" type="text/x-scriptlet" data="about:<body><div style='position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1 solid black'>test</div>"></OBJECT><select><option>hellohellohellohello</select><button onclick=aa.style.display=aa.style.display=="none"?"":"none">test</button>这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法.
分享到：
相关推荐
/** * 让iframe 显示在 指定的div下面 针对ie6 select挡住div 的bug 采用 iframe来当作div的底 * * @param string divId 需要解决的div层 * @param string iframeId 采用的 IFRAME ,如果不指定 自动...
解决IE6 中select 穿透 div 等层的问题
ie6下select覆盖div的解决办法
用div+jq高仿ie6的select表单随内容增加 进行了一个升级，将其做成一个类似插件的形式； 在html中，依旧是应用传统的select进行布局，只需要给select一个class为toDiv，就可以动态的将select替换为已经设置好了的div...
由于select是window控件，它会遮挡被定位的元素，可以使用该jquery插件解决问题.这里有详细的举例说明.
NULL 博文链接：https://wangyispider.iteye.com/blog/788810
用DIV模仿SELECT下拉框 function replaceSelects() { try{ for (i=0;i;i++){ // 隐藏 select selects[i].style.display = 'none'; select_divTag = document.createElement('div'); select_divTag.id = ...
select 在ie6下覆盖div bug 解决方案。 div 模拟select 单选 在 body onload事件中调用init_select方法就可，参数传相关背景图片就可。我都已经放到资源包下了。
select ——使用DIV 实现 Select js源码
利用Jquery解决IE6下，Select的Z-index过高的BUG 经常有朋友下拉菜单被Select遮盖。可以用此方法解决！
使用div制作蒙版或模拟弹出窗口，但在IE6下，当div下方有下拉列表框select元素的时候，下拉列表框会划破div显示在div之上，不论z-index设为何值均会出现此问题，可能由于下拉列表控件的弹出式下拉列表的原因导致Z轴...
ie6下DIV覆盖select框js解决代码
DIV+select美化支持IE6 IE7 火狐（门户搜索）觉得兼容 多多支持啊。 偶整理出来滴。共享下。偶米多少积分了。搞点分啊。支持下。。
select实现div图层切换效果，使用jquery简单易懂、方便修改
今天我说说iframe解决的一般方法，已经使用jQuery插件bgiframe解决IE6 select z-index无效，遮挡div的bug。 解决方法之一：Iframe包裹select元素 使用iframe包住select，这样iframe有z-index，只要在div上设置的z-...
div 模拟 select 多选 实现还有点bug，望大家一起改正。
使用div+css，实现select美化效果，兼容谷歌，火狐，IE6以上浏览器等。
div+css模拟select
在IE6的環境下，如果網頁上有div區塊和下拉選單重疊在一起的時候，即使再怎麼調整下拉選單的z-index，下拉選單還是會把div區塊蓋住(在Firefox是正常的)，google了一下網路上的資料，大多是用iframe來解這個問題，但...
Div下拉菜单被Select挡住的解决办法 下拉菜单 bbbbbbb ccccccc ccccccc ccccccc ccccccc test0 test1 test2 test3 Div被Select挡住，是一个比较常见的问题。 有的朋友通过把div的内容放入iframe或object里来...