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();
转载于:https://blog.51cto.com/shunge/693696