IE6下 select z-index无效而遮挡div

在IE6下,select是一个浏览器控件,有一个诡异的bug,那就是z-index无效,当出现弹窗在select上面时,select会诡异的出现在你的最前面。

解决方法有三种:

1.用 iframe 包裹 select 元素

使用iframe包住select,这样iframe可以有z-index,只要在div上设置的z-index比iframe的高即可实现。示例代码如下:

  <iframe style="z-index:1;position: absolute; ">
    <select name="me">                    
      <option value="name">Darren聂微东</option>     
      <option value="sex">male</option>     
      <option value="age">secret</option>     
    </select>     
  </iframe>

2.以 Iframe 作为div的子元素,覆盖 select 元素(推荐使用)
建立一个跟div同宽同高的iframe,并且z-index比div要低。

<style type="text/css">
#iframe{   
    position: absolute;
    width: 100%;
    height: 100%;
    z-index:-1;
}   
.text_div{   
    position: absolute;   
    left:100px;   
    top:50px;   
    width: 300px;   
    height: 200px;   
    background : blue;     
    z-index:100;   
}   
</style>
<div class="text_div">  
     <span>这里可以包含其他dom元素</span>  
     <iframe id="iframe"></iframe>  
</div>

注:在这里如果不加src属性,尽管iframe会把select挡住,但是由于默认iframe为白色,会影响原来的div背景色。解决方法可以加了一个空的HTML文件,并把body 的值设为和原来div背景色一致,这样就解决了默认白色背景色的问题,这里只是一种思路,办法总比困难多 ^_^。

3.点击弹窗是设置其他不影响布局的select隐藏。

$('select').css('visiblity','visible');

然后再关闭弹窗时再显示出来。

 

原创文章:IE6下 select z-index无效而遮挡div ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/ie6-select-z-index-bug.html)

“IE6下 select z-index无效而遮挡div”有2个评论

  1. Jquery特效

    IE6就不要讲了,讲些新特性和移动端开发。

    登录回复
    • 前端博客

      后面会逐渐增加,这个博客会记录我在实际开发中遇到的问题及解决方案。

      登录回复