解决IE6 select z-index无效，遮挡div的bug

在最近的一个项目中，遇到了IE6 select遮挡div的bug，为了解决这个bug我查了很多资料，试图找到一个最最有效的方法，很多人是通过iframe的方法来解决，其实我查了国外的很多资料也是通过iframe的方法来解决的。今天我说说iframe解决的一般方法，已经使用jQuery插件bgiframe解决IE6 select z-index无效，遮挡div的bug。
　　解决方法之一：Iframe包裹select元素
　　使用iframe包住select，这样iframe有z-index，只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性，不可能每个select都要加个iframe吧？所以不推荐！代码如下：
　　1 <iframe style="z-index:1;position: absolute; ">
　　2     <select name="country">
　　3         <option value="1">china</option>
　　4         <option value="2">japanese</option>
　　5         <option value="1">U.S.A</option>
　　6     </select>
　　7 </iframe
　　解决方法之二：以Iframe作为div的子元素，覆盖select元素
　　建立一个跟div同宽同高的iframe，并且z-index比div要低。这种方法推荐使用：
　　01 <style type="text/css">
　　02 .T_iframe
　　03 {
　　04     position: absolute; /*绝对定位保证iframe不会占用流布局空间*/
　　05     width: 100%; /*100%保证可以覆盖整个div*/
　　06     height: 100%;
　　07     z-index:-1; /*-1保证iframe显示在div下方*/
　　08     left:0px;
　　09     top:0px;
　　10 }
　　11 .T_div
　　12 {
　　13     position: absolute;
　　14     left:100px;
　　15     top:50px;
　　16     width: 300px;
　　17     height: 200px;
　　18     background : blue;
　　19     z-index:100;
　　20 }
　　21 </style>
　　22 <div class="T_div">
　　23     <span>这里可以包含其他dom元素</span>
　　24     <iframe class="T_iframe"></iframe>
　　25 </div>
　　解决方法之三：使用jQuery的bgiframe插件
　　如果你的项目引用了jQuery，那么我推荐使用bgiframe插件来解决select的遮挡div问题，原理很简单，就是建立一个同高同宽的iframe插入到div中去~bgiframe下载地址：http://github.com/brandonaaron/bgiframe，使用方法：
　　1 $('.fix-z-index').bgiframe();
　　参数说明：
　　• top：设置top位置，默认为auto
　　• left：设置left位置，默认为auto
　　• width：设置iframe宽度，默认为auto
　　• height：设置iframe高度，默认为auto
　　• opacity：设置是否透明，默认为true
　　• src：设置iframe的src，默认为JavaScript:false

分享到：