IE6兼容性问题 select 遮盖div
来源:互联网 发布:sql blob大小 编辑:程序博客网 时间:2024/04/30 02:25
在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来完成功能,从而成为不可回避的问题。
1
var
sd = XX.style.display;
2
XX.style.display =
"none"
;
3
...
4
//关闭弹出层后显示
5
XX.style.display = sd;
当然还需要设置一些必要地属性,比较关键是设置iframe的src属性为javascript:false;,并设置display为none,透明度为0。
01
//popDiv是弹出层,nowindex是当前的z-index
02
popDiv.style.zIndex=nowindex+1;
03
//加一个iframe以遮住ActiveX
04
if
($get(
"__iframeBodyCover"
+ winname )==
null
){
05
var
iframeBodyCover = document.createElement(
"iframe"
);
06
iframeBodyCover.id =
"__iframeBodyCover"
+winname;
07
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;"
;
08
iframeBodyCover.src =
"javascript:false;"
;
09
document.body.appendChild(iframeBodyCover);
10
}
11
//iframe的z-index比div的要低
12
$get(
"__iframeBodyCover"
+ winname ).style.zIndex = nowindex;
转载方案:
有多种种办法;
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="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br/>
<br/>
<a href="#" onclick="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>
- <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>
完。
- IE6兼容性问题 select 遮盖div
- IE6 select穿透问题(div 定位无法遮盖select)!
- ie6 select无法被div遮盖的bug解决
- 解决IE6 select无法被div遮盖的bug
- IE6中select控件遮盖问题
- IE6 jquery dialog select无法遮盖
- Div Select Iframe 的相互遮盖
- div遮盖select的解决方案(简单)
- DIV遮盖select元素(模拟disabled)
- IE6设置select标签高度兼容性问题
- 在IE6中浮动层遮盖不住select的方法
- jquery ui的autocomplete在ie6下不能遮盖select
- div覆盖select(IE6)
- select 遮盖
- 解决div层被select下拉框遮盖的问题
- 控制DIV自动调整(防Select、Flash、Object遮盖)
- 解决IE中DIV无法遮盖SELECT的问题
- select网页下拉列表与div层遮盖问题
- android 添加随意拖动的桌面悬浮窗口
- 撞车之后,不要傻里傻气的!
- mips指令
- Jquery mobile + phoneGap 写WebApp---android
- 《Effective STL》读书笔记九:Item 17:使用“the swap trick”来削减过剩的容量 Item 18:避免使用vector<bool>
- IE6兼容性问题 select 遮盖div
- RedHat配置ipv6
- df: `/root/.gvfs': Permission denied
- oracle删除重复行
- jquery $(document).ready() $(window).load()
- LINUX configure
- 背包 poj2184
- sap 事务代码跳过权限检查
- 并查集简单小习题 poj2524