IE6.0 DIV层被SELECT遮挡的问题以及解决方案

2010-01-29 10:18
在IE6.0以及其以下的版本中，会出现这样的一个情况：DIV层 里面的东西会被SELECT标签的内容给遮挡，导致DIV层里面的控件不能完全展示，造成很大的问题。就其原因：在IE6.0中给控件进行属性定位的时 候,SELECT是输入一个Window的IE组件，而DIV是输入一个用户的组件，在优先级上SELECT是要比DIV要高的，所以在页面呈现的时候 SELECT会遮住用户组件DIV，针对这个问题，我们有多种解决方案，而其中最好最简单也是最直接的就是使用IFRAME组件。
 
IFRAME是IE5.5以后提出来的一个WINDOW组件，在IFRAME中只能嵌套页面，所以IFARAME中有SRC属性可以直接引用一个页面。在 IE中有一组规范，IFRAME的优先级要比SELECT高，所以在页面显示的时候，如果IFRAME和SELECT在同一个位置的话，我们会发 现,IFRAME把SELECT给遮挡了，而DIV中可以加入IFRAME，有了这个基础我们知道了：将我们要显示的DIV层中加入一个空的IFRAME
 
<iframe style="position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;left: 0; scrolling: no;" frameborder="0" src="about:blank">
 
 
position:absolute是给IFRAME进行定位的。很明显里面给了IFRAME一个z-index:-1，表示在页面上IFRAME的z坐 标是-1，SELECT默认的是0.而由于其优先级关系IFRAME会遮挡SELECT，而IFRAME是在DIV中的。所以DIV不会被SELECT给 遮挡。再给我们的DIV设置一个Z坐标就OK，Z坐标要比SELECT要高要比IFRAME要高。
 
例如：
 
.datePicker {
border: 1px solid WindowText;
background: Window;
width: 170px;
 
height:150px;
 
z-index:100;
padding: 0px;
cursor: default;
-moz-user-focus: normal;
}
 
 
 
// create elements
this._el = doc.createElement("div");
this._el.className = "datePicker";
 
if(window.ActiveXObject){
this._iframe = doc.createElement("<iframe style=\"position: absolute; z-index: -1; width: 100%; height: 100%; top: 0;left: 0; scrolling: no;\" frameborder=\"0\" src=\"about:blank\">");
this._el.appendChild(this._iframe);
}
// header
var div = doc.createElement("div");
div.className = "header";
this._el.appendChild(div);
 
------------------------------------------------------------
 
  在网页中,如果将div,span等标签层叠到Select表单上时，div,span等标签会被Select表单穿过，即使设置了z-index也没用。可以通过以下方法解决。
 
创建一个没有边框和滚动条的iframe，并将大小及位置设置与要层叠的标签一样，z-index小于要层叠的标签即可。例：
 
<div style="position:absolute;width:100px;height:100px;top:0;left:0;background-color:#FF0000;z-index:100"></div>
<select></select>
<iframe scrolling="no" frameborder="0" style="position:absolute;z-index:99;width:100px;height:100px;top:0;left:0" id="fy_CP_Frame"></iframe>
 
在页面使用多个浮动div的时候（尤其在动态生成的列表中），如果恰好碰上旁边有个select，那是一件很烦恼的事（IE6下比较耀眼的特点，IE7和FF就没有）——浮动div会给select遮盖了。
解决方法很简单
先在页面任意位置放置一个空的隐藏iframe
<iframe id="iFrm" style="position:absolute;z-index:1;display:none;" frameborder="0" />
然后在文件头的js里面，将这个iframe的高度、宽度、OffsetTop、OffsetLeft设置得和div的一样，
这样，iframe就会作为div的底部（当然，div的z-index属性要设置得比iframe要高），而浮动div就不会被select给遮盖了
 
 
function showCabinListPanel(obj, Id) {
$(".CabinListPanel").hide();
var clp = $("#" + Id);
var CLP_Offset = document.getElementById(Id);
var e = $(obj);
var Frm = document.getElementById("iFrm");
 
CLP_Offset.style.top = e.offset().top + e.height();
CLP_Offset.style.left = e.offset().left + e.width() - $(CLP_Offset).width() + 3;
Frm.style.top = CLP_Offset.style.top;
Frm.style.left = CLP_Offset.style.left;
$(Frm).width(clp.width());
$(Frm).height(clp.height() + 2);
 
clp.css("position", "absolute");
clp.show();
$(Frm).show();
 
}
 
 
 
 
SELECT 元素在IE6中遮挡DIV的解决方法
 
文章分类:Web前端
解决IE6 select z-index无效，遮挡div的bug
在最近的一个项目中，遇到了IE6 select遮挡div的bug，为了解决这个bug我查了很多资料，试图找到一个最最有效的方法，很多人是通过iframe的方法来解决，其实我查了国外的很多资料也是通过iframe的方法来解决的。今天我说说iframe解决的一般方法，已经使用jQuery插件bgiframe解决IE6 select z-index无效，遮挡div的bug。
解决方法之一：Iframe包裹select元素
使用iframe包住select，这样iframe有z-index，只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性，不可能每个select都要加个iframe吧？所以不推荐！代码如下：
<iframe style="z-index:1" style="z-index:1"><!-- 用iframe 解决此bug -->     
            <select name="country">                    
                 <option value="1">china</option>     
                <option value="2">japanese</option>     
                <option value="1">U.S.A</option>     
             </select>     
</iframe>
解决方法之二：以Iframe作为div的子元素，覆盖select元素
建立一个跟div同宽同高的iframe，并且z-index比div要低。这种方法推荐使用：
<style>.T_iframe   
{   
    position: absolute;/*绝对定位保证iframe不会占用流布局空间*/   
    width: 100%;    /*100%保证可以覆盖整个div*/   
    height: 100%;   
    z-index:-1; /*-1保证iframe显示在div下方*/   
}   
.T_div   
{   
    position: absolute;   
    left:100px;   
    top:50px;   
    width: 300px;   
    height: 200px;   
    background : blue;     
    z-index:100;   
}   </style>
<div class="T_div">  
     <span>这里可以包含其他dom元素</span>  
     <iframe class="T_iframe"></iframe>  
</div>
解决方法之三：使用jQuery的bgiframe插件
如果你的项目引用了jQuery，那么我推荐使用bgiframe插件来解决select的遮挡div问题，原理很简单，就是建立一个同高同宽的iframe插入到div中去~bgiframe下载地址：http://github.com/brandonaaron/bgiframe，使用方法：
$('.fix-z-index').bgiframe();