您的位置：首页 > 网站优化 > css  >  IE6下select z-index无效div被遮挡解决办法

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

 更新时间：2017年7月6日 23:13  点击：2300
文章来详细的举了三个实例来介绍关于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，否则就会属性失效，跟着这两个因素

[!--infotagslink--]

相关文章

  • PHP session_start()很慢问题分析与解决办法

    本文章来给各位同学介绍一下关于PHP session_start()很慢问题分析与解决办法，希望碰到此问题的同学可进入参考。 最近在做东西的时候发现一个问题 有一个接口挂...2016-11-25

  • php中json_decode()和json_encode()用法与中文不显示解决办法

    本文章介绍了关于php中json_decode()和json_encode()用法与中文不显示解决办法，有需要的朋友可以参考一下下。 php中json_decode()和json_encode() 1.json_decode(...2016-11-25

  • phpexcel导出数据身份证后四位0000解决办法

    在php中我们如果要导入excel数据我们通常会使用phpexcel插件了，但是有朋友会发与使用phpexcel导出数据出现身份证后四位是0000情况了，下面我们就来看解决办法。 最...2016-11-25

  • 401错误码代表什么 401错误解决办法

    401是HTTP状态码的一种，属于“请示错误”，表示请求可能出错，已妨碍了服务器对请求的处理。具体的401错误是指：未授权，请求要求进行身份验证。登录后，服务器可能会返回对页面...2017-01-22

  • Mybatis Plus select 实现只查询部分字段

    这篇文章主要介绍了Mybatis Plus select 实现只查询部分字段的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-01

  • apache网站提示503错误解决办法

    Apache status 503 的原因大致有如下几种情况 ： 1、 CPU 负载过高，服务器响应不过来，返回503 2、 系统连接数超限，超过MaxVhostClients的上限，返回503 3、 单IP连接数超限，超过M...2016-01-28

  • Perl CPAN::Modulelist的解决办法

    今天用CPAN安装Term::ReadLine，报了个这样的错误 Going to read /root/.cpan/sources/modules/03modlist.data.gz Can't locate object method "data" via package "C...2016-11-25

  • Mysql select语句设置默认值的方法

    1.在没有设置默认值的情况下： 复制代码 代码如下:SELECT userinfo.id, user_name, role, adm_regionid, region_name , create_timeFROM userinfoLEFT JOIN region ON userinfo.adm_regionid = region.id 结果：...2014-05-31

  • vue 监听 Treeselect 选择项的改变操作

    这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01

  • phpStudy访问速度慢和启动失败的解决办法

    下面给大家介绍phpstudy访问速度慢的解决办法。1、修改mysql数据库链接地址为ip地址127.0.0.1。2、使用最新版本，这个坑了我好久时间。下面一段内容是关于phpstudy启动失败的解决办法。php5.3、5.4和apache都是用vc9编...2015-11-24

  • PHP Curl出现403错误的解决办法

    自己用的小PHP应用，使用curl抓网页下来处理，为了穿墙方便，使用Privoxy作为代理，便于选择哪些网站使用proxy、哪些不用。但今天却遇到了奇怪的问题，访问google baidu这些网站居然都返回403错误，而访问其他的一些网站没事，如果...2014-05-31

  • vue Treeselect下拉树只能选择第N级元素实现代码

    这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01

  • Vue select 绑定动态变量的实例讲解

    这篇文章主要介绍了Vue select 绑定动态变量的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23

  • vue treeselect获取当前选中项的label实例

    这篇文章主要介绍了vue treeselect获取当前选中项的label实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01

  • PHP判断上传文件类型的解决办法

    分享给大家php判断上传文件类型的方法，大家一起学习学习。/** * 读取文件前几个字节 判断文件类型 * @return String */ function checkTitle($filename){ $file=fopen($filename, "rb"); $bin=fread($file, 2); /...2015-10-21

  • MySQL中SELECT+UPDATE处理并发更新问题解决方案分享

    问题背景： 假设MySQL数据库有一张会员表vip_member（InnoDB表），结构如下： 当一个会员想续买会员（只能续买1个月、3个月或6个月）时，必须满足以下业务要求： &#8226;如果end_at早于当前时间，则设置start_at为当前时间，end_at为当前时...2014-05-31

  • android.os.BinderProxy cannot be cast to com解决办法

    本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法，希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20

  • MYSQL数据库使用UTF-8中文编码乱码的解决办法

    1.用phpmyadmin创建数据库和数据表 创建数据库的时候，请将“整理”设置为：“utf8_general_ci” 或执行语句： 复制代码 代码如下:CREATE DATABASE `dbname` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; 创...2015-10-21

  • php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法

    最近遇到一个问题，就是在使用php的mail函数发送utf-8编码的中文邮件时标题出现乱码现象，而邮件正文却是正确的。最初以为是页面编码的问题，发现页面编码utf-8没有问题啊，找了半天原因，最后找到了问题所在。 1.使用 PEAR 的...2015-10-21

  • PHP页面转UTF-8中文编码乱码的解决办法

    对于乱码这个问题php开发者几乎都会有碰到过，我们下面主要是介绍了php文件乱码和页面乱码。PHP页面转UTF-8编码问题 1.在代码开始出加入一行： header("Content-Type: text/html;charset=utf-8"); 2.PHP文件编码问题...2015-10-21