IE6兼容性问题 select 遮盖div

最新推荐文章于 2017-12-14 15:34:09 发布

转载最新推荐文章于 2017-12-14 15:34:09 发布 · 1.1k 阅读

JS/jQuery/Ajax 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了解决IE6浏览器中DIV无法遮罩Select控件的问题，提供了一种使用iframe进行遮罩的有效方法，并附带了实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在IE中,select属于window类型控件，它会“挡住”所有非window类型控件
可以这么理解，div这样的组件是在浏览器客户区使用代码“渲染”的，
他们被渲染在客户区的绘画表面上，
而select是使用的标准windows控件，只是作为客户区的子控件放置而已，
它会覆盖所有客户区绘画表面上“画”出来的一切，但不一定会覆盖其他类型的window控件，
比如iframe和其他的select，如果你使用过类似Delphi这样的环境就会自然理解。IE7解决了此类BUG。

使用JS做DIV弹出层时，一般地在IE下是无法遮罩 ActiveX控件的，同时在IE6下Select也遮罩不住。在IE中ActiveX默认永远显示在最顶层，因此通过设置Style的Z-Index属性也无法改变遮罩关系的。在信息系统软件中，许多场合由于性能、操作等原因，往往会使用ActiveX代替Html来完成功能，从而成为不可回避的问题。

 
var sd = XX.style.display;
 

 
XX.style.display = "none";
 

...

 
//关闭弹出层后显示
 

`5`	`XX.style.display = sd;`

　　最容易想到的方法是在弹出DIV层前隐藏控件对应的object，关闭层后再显示出来。如果只是当个页面诚然这样简单，但如果存在多个Iframe嵌套的话，对于其他Iframe也存在控件的话就比较麻烦。

　　在IE6以后版本存在称之为shim的解决办法，基本思路是这样的，在当前页面动态创建一个iframe，其z-index比当前的要高，则这个iframe会呈现在最上方，然后将弹出的div的z-index设置比这个iframe的要高，此时弹出的div就能遮罩住ActiveX控件了，示意见如下简图（实际div是与iframe重合的）。

　　当然还需要设置一些必要地属性，比较关键是设置iframe的src属性为javascript:false;，并设置display为none，透明度为0。

 
//popDiv是弹出层，nowindex是当前的z-index
 
popDiv.style.zIndex=nowindex+1;
 
//加一个iframe以遮住ActiveX
 
if($get("__iframeBodyCover" + winname )==null){
 
    var iframeBodyCover = document.createElement("iframe");
 
        iframeBodyCover.id = "__iframeBodyCover"+winname;
 
        iframeBodyCover.style.cssText = "position:absolute;top:0;left:0;width:" + document.body.clientWidth+ "px; height:" + document.body.clientHeight + "px;background-color:#000000;filter:alpha(opacity=0);display:none;";
 
        iframeBodyCover.src ="javascript:false;";
 
        document.body.appendChild(iframeBodyCover);
 
}
 
//iframe的z-index比div的要低
 
$get("__iframeBodyCover" + winname ).style.zIndex = nowindex;

　　当然这时候在IE6下自然也能遮罩住select了，方法还是有一点巧妙地，没有经验的可能比较难以想到，不过不知道是不是有更好地方法。

转载方案：

有多种种办法;
1. 修改select，不用标准select，而是自己用其他html元素模拟
2. 修改你的div，使用iframe。
3. 在div被显示的时候或者到达select所在位置时隐藏select
4. 在div中或div的同一坐标上，用相同尺寸的iframe先遮挡一下，然后在iframe上显示div的内容。
5.Object对象的优先度较高,可以挡住select框

解决方案4 iframe

<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="#" οnclick="DivSetVisible(true)">Click to show DIV.</a>
<br/>
<br/>
<a href="#" οnclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>

转载方案：

先看看IE6下效果：

IE8下：

可见，这是极其难看的，无论层的z-index设到多少亿都是没用的，目前没发现完美的解决方法，都是存在bug的，本人现知道的有2种：

1.显示层之前隐藏全部select，此方法影响效率，也影响布局美观。

2.在层里插入一个隐藏iframe,奇怪的是，iframe可以覆盖select，需要设置iframe为浮动，透明度为0，IE6效果：

代码,IE6-8、firefox3.5、safari4、opera9测试下通过：

Html代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div style="position:absolute;background:red;width:100px;height:200px;left:20px;top:20px;">
<iframe style="position:absolute;width:100%;height:100%;_filter:alpha(opacity=0);opacity=0;border-style:none;"></iframe>
sdfsdfsdf<br>sdfsdfsdf<br>sdfsdfsdf<br>sdfsdfsdf<br>
</div>
<select><option>sdf</option></select>
dfgdfgdfgdfgdfgdfgdfgdfgdfdfgdfgdfgdfgdfgdfgdfgdfgddfgdfgdfgdfgdfgdfgdfgdfgd
dfgdfgdfgdfgdfgdfgdfgdfgdf
</body>
</html>