您现在的位置是：网站首页> 编程资料编程资料
IE6 select z-index无效，遮挡div bug的解决方法_CSS教程_CSS_网页制作_
2021-09-08
899人已围观
简介 在最近的一个项目中，遇到了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_网页制作_
- css外部样式加载Link与import的区别_CSS教程_CSS_网页制作_
- 在浏览器中解析"赋予margin属性"的checkbox空白边距(IE6和FF)_CSS教程_CSS_网页制作_
- 你不知道的outerText,innerText 区别说明_CSS教程_CSS_网页制作_
- CSS 之强制换行技巧_CSS教程_CSS_网页制作_
- 谨慎使用CSS中的星号(*)通配符_CSS教程_CSS_网页制作_
- CSS样式在IE6下无效的问题解决方法_CSS教程_CSS_网页制作_
- CSS 解决未知高度垂直居中实现代码_Div+CSS教程_CSS_网页制作_
