您现在的位置是：网站首页> 编程资料编程资料
IE6 select z-index无效，遮挡div bug的解决方法_CSS教程_CSS_网页制作_
2023-10-30
113人已围观
简介 在最近的一个项目中，遇到了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吧？所以不推荐！代码如下：
解决方法之二：以Iframe作为div的子元素，覆盖select元素
建立一个跟div同宽同高的iframe，并且z-index比div要低。这种方法推荐使用：
这里可以包含其他dom元素
解决方法之三：使用jQuery的bgiframe插件
如果你的项目引用了jQuery，那么我推荐使用bgiframe插件来解决select的遮挡div问题，原理很简单，就是建立一个同高同宽的iframe插入到div中去~bgiframe下载地址：http://github.com/brandonaaron/bgiframe，使用方法：
$('.fix-z-index').bgiframe();
参数说明：
top：设置top位置，默认为auto
left：设置left位置，默认为auto
width：设置iframe宽度，默认为auto
height：设置iframe高度，默认为auto
opacity：设置是否透明，默认为true
src：设置iframe的src，默认为javascript:false
解决方法之一：Iframe包裹select元素
使用iframe包住select，这样iframe有z-index，只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性，不可能每个select都要加个iframe吧？所以不推荐！代码如下：
复制代码
代码如下:解决方法之二：以Iframe作为div的子元素，覆盖select元素
建立一个跟div同宽同高的iframe，并且z-index比div要低。这种方法推荐使用：
复制代码
代码如下:这里可以包含其他dom元素
解决方法之三：使用jQuery的bgiframe插件
如果你的项目引用了jQuery，那么我推荐使用bgiframe插件来解决select的遮挡div问题，原理很简单，就是建立一个同高同宽的iframe插入到div中去~bgiframe下载地址：http://github.com/brandonaaron/bgiframe，使用方法：
$('.fix-z-index').bgiframe();
参数说明：
复制代码
代码如下:top：设置top位置，默认为auto
left：设置left位置，默认为auto
width：设置iframe宽度，默认为auto
height：设置iframe高度，默认为auto
opacity：设置是否透明，默认为true
src：设置iframe的src，默认为javascript:false
相关内容
- 让Firefox未载入图片显示边框 _CSS教程_CSS_网页制作_
- HTML+CSS3 模仿Windows7 桌面效果 _css3_CSS_网页制作_
- 基于css3仿造window7的开始菜单_css3_CSS_网页制作_
- 雷霆战机 5星战机获得方法介绍_手机游戏_游戏攻略_
- 雷霆战机 电浆炮获得方法 电浆炮好不好_手机游戏_游戏攻略_
- 雷霆战机 钢铁守卫好不好 钢铁守卫怎么用最好_手机游戏_游戏攻略_
- 天天酷跑 哪个宠物得分最高 哪个宠物适合刷分_手机游戏_游戏攻略_
- 全民精灵 精灵阿木木属性详细介绍_手机游戏_游戏攻略_
- 雷霆战机 5星紫色装备获取的方法_手机游戏_游戏攻略_
- 雷霆战机 魔龙之鳞属性详细介绍_手机游戏_游戏攻略_
