IE6下select z-index无效div被遮挡解决办法

解决方法之一：Iframe包裹select元素

使用iframe包住select，这样iframe有z-index，只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性，不可能每个select都要加个iframe吧？所以不推荐！代码如下：

 代码如下 复制代码
<iframe style="z-index:1;position: absolute; "><!-- 用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 type="text/css">
.T_iframe
{
 position: absolute; /*绝对定位保证iframe不会占用流布局空间*/
 width: 100%; /*100%保证可以覆盖整个div*/
 height: 100%;
 z-index:-1; /*-1保证iframe显示在div下方*/
 left:0px;
 top:0px;
}
.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>

javascript解决办法

显示div的同时隐藏select

 代码如下 复制代码

<SCRIPT LANGUAGE="JavaScript" defer>
<!--
var elms = document.getElementsByTagName("select");
for (var i=0;i<elms.length;i++)
if (elms[i].type=="select-one") cover(elms[i]);

function cover(s){
s.onmouseout = hideSelect;
s.onblur = hideSelect;
if (s.onchange==null)
s.onchange = resetSelectValue;
else{
s.doOnchange = s.onchange;
s.onchange = function(){this.doOnchange();resetSelectValue()}
}
var t = document.createElement("input");
t.style.width = s.offsetWidth;
t.value = s.options[s.selectedIndex].text;
t.onmouseover = showSelect
document.body.insertBefore(t,s)
s.style.display="none";
}
function showSelect(){
var e = event.srcElement;
e.style.display="none";
e.nextSibling.style.display="inline";
}
function hideSelect(){
var e = event.srcElement;
e.style.display="none";
e.previousSibling.style.display="inline";
e.blur();
}
function resetSelectValue(){
var e = event.srcElement;
e.previousSibling.value = e.options[e.selectedIndex].text
e.blur();
}
//-->
</SCRIPT> 

经过搜索百度，才知道原来IE6并不是z-index属性无效，而是IE6只认祖先，这样一个规律，如果IE6无效的时候，你可以先检查IE6最顶的div 的z-index属性，里面的div是跟随祖先的变化而变化的.

并且之前的div不可以有position:relative，否则就会属性失效，跟着这两个因素

时间： 2024-09-20 07:33:26

IE6下select z-index无效div被遮挡解决办法的相关文章

ie6 下select遮罩住弹出层解决办法

使用JS做DIV弹出层时,一般地在IE下是无法遮罩ActiveX控件的,同时在IE6下Select也遮罩不住.在IE中ActiveX默认永远显示在最顶层,因此通过设置Style的Z-Index属性也无法改变遮罩关系的.在信息系统软件中,许多场合由于性能.操作等原因,往往会使用ActiveX代替Html来完成功能  代码如下 复制代码 var sd = XX.style.display; XX.style.display = "none";  ... //关闭弹出层后显示 XX.styl

SQL Server 数据库使用备份还原造成的孤立用户和对象名‘xxx’无效的错误的解决办法

server|备份|错误|对象|解决|数据|数据库 介绍SQL Server 数据库使用备份还原造成的孤立用户和对象名'xxx'无效的错误的解决办法          在使用数据库的过程中,经常会遇到数据库迁移或者数据迁移的问题,或者有突然的数据库损坏,这时需要从数据库的备份中直接恢复.但是,此时会出现问题,这里说明几种常见问题的解决方法.一.孤立用户的问题比如,以前的数据库的很多表是用户test建立的,但是当我们恢复数据库后,test用户此时就成了孤立用户,没有与之对应的登陆用户名,哪怕你建立

DB2 ESE 9.1在Windows Server 2008下出现无法新建数据库的情况及解决办法

DB2 Enterprise Server Edition(DB2 ESE)9.1在Windows Server 2008 下出现无法新建数据库的情况及解决办法 在安装有,DB2 9.1版本的Windows Server 2008 上面,使用默认的安装方式导致无法创建数据库,相关的错误提示: "SQL3012C 发生系统错误(原因码= "").无法处理后续的SQL 语句.SQLSTATE=58005". 通过分析日志"%programfiles%\IBM\

remotingexception-调用Dubbo服务报以下错误，跪求问题原因和解决办法

问题描述 调用Dubbo服务报以下错误,跪求问题原因和解决办法 Caused by: com.alibaba.dubbo.remoting.RemotingException: message can not send, because channel is closed . url:dubbo://192.168.17.71:21954/com.tw.ei.business.agent.service.ReqBuinessAgentService?anyhost=true&applicatio

Ubuntu下开启php调试模式报错信息解决办法_Linux

Ubuntu下开启php调试模式报错信息解决办法 在Ubuntu下php的缺省设置是不显示错误信息的,如果程序出错会显示"无法处理此请求的错误提示",这在开发环境下非常不方便. 其实我们只要编辑下apache的配置文件就好 1.我的apache 配置文件目录是/etc/apache2/apache2.conf sudo vim /etc/apache2/apache2.conf 再最后加入以下两行 php_flag display_errors on php_value error_r

Asp.net 默认配置下，Session莫名丢失的原因及解决办法

Asp.net 默认配置下,Session莫名丢失的原因及解决办法 正常操作情况下Session会无故丢失.因为程序是在不停的被操作,排除Session超时的可能.另外,Session超时时间被设定成60分钟,不会这么快就超时的. 这次到CSDN上搜了一下帖子,发现好多人在讨论这个问题,然后我又google了一下,发现微软网站上也有类似的内容. 现在我就把原因和解决办法写出来. 原因: 由于Asp.net程序是默认配置,所以Web.Config文件中关于Session的设定如下: <sessio

IE6下select下拉框不能随滚动条正常滚动解决办法

经过试验,在IE6下出现这个问题的最精简代码如下:  代码如下 复制代码 <div style="height:60px;overflow:auto;filter:alpha(opacity=0)">   <select><option>a</option><option>b</option></select>   <select><option>a</option>

IE6中Select覆盖DIV元素各种解决办法

普通的元素,textbox, div, table--这些,属于windowless element,它们之间互相遮盖的情况由z-index决定,在它们之上,是SELECT这些windowed element.所以一般情况下div.table等不能遮盖select. 解决办法一:Iframe包裹select元素  代码如下 复制代码 <iframe style="z-index:1" style="z-index:1"><!-- 用iframe 解

BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)_jquery

今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路: 1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加载页放置一个时间控件,测试通过 3,在模态框最外层放置一个时间控件,不通过 主要原因是模态框与时间下拉菜单层级关系造成(z-index),因时间控件是收bootstrap的时间控件.js文件生成,所以导致在页面与css样式表中修改无效,网上有直接修改bootstrap的时间控件.js文件,然而bo