您当前的位置: 首页 » DIV+CSS编程 » IE6.0 DIV层被SELECT遮挡的问题以及解决方案
IE6.0 DIV层被SELECT遮挡的问题以及解决方案
论坛链接
在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);
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);
#2楼发布者：superadmin时间：2009-08-13 16:15:45
在网页中,如果将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>
创建一个没有边框和滚动条的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>
#3楼发布者：superadmin时间：2009-08-13 16:16:10
在页面使用多个浮动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();
}
解决方法很简单
先在页面任意位置放置一个空的隐藏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();
}