IE6 select遮挡div的bug:
通常通过iframe的方法来解决,很多资料也是通过iframe的方法来解决的。使用
jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。
解决方法之一: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>.T_iframe
{
position: absolute;/*绝对定位保证iframe不会占用流布局空间*/
width: 100%; /*100%保证可以覆盖整个div*/
height: 100%;
z-index:-1; /*-1保证iframe显示在div下方*/
}
.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>
解决方法之三:使用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解决的一般方法,已经使用jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。 解决方法之一:Iframe包裹select元素 使用iframe包住select,这样iframe有z-index,只要在div上设置的z-...
在早期的Internet Explorer 6(简称IE6)浏览器中,存在一个著名的布局bug,这个问题主要涉及到`<select>`元素与`<div>`元素的层叠上下文(Z-index)处理。当一个`<div>`元素试图遮盖页面中的下拉列表框`<select>`时...
在互联网的早期,尤其是IE6浏览器占据主导地位的时代,开发者们常常会遇到一个棘手的问题:在页面上,当一个`div`层位于`select`下拉框之上时,`select`控件会穿透`div`层显示出来,导致设计效果无法正常展现。...
用DataGrid基于jQuery(实际上只用了它的按照类查找元素一个方法)写的自定义DropDownList,解决不能控制生成后的Select html控件不能控制zIndex而遮挡Div层及其他复杂样式,没有封装成dll,压缩包里是例子及所有用到...
-修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,用来定时发起AJAX请求。 +2009-09-06 v2.1.0 -Button的Pressed属性值能够正确的反映客户端的变化。 -优化...
-修正IE7下不能以下划线作为CSS中类名的前缀的BUG(feedback:Steve.Wei)。 -添加定时器控件Timer,用来定时发起AJAX请求。 +2009-09-06 v2.1.0 -Button的Pressed属性值能够正确的反映客户端的变化。 -优化...
11. **IE中的div和select交互**:在Internet Explorer中,解决了div元素被select控件遮挡的问题,确保了在各种布局下的正常显示。 12. **方向键支持**:用户可以通过上下方向键选择列表中的建议项,增加了键盘导航...
- **IE6中的常见Bug及解决方案**: - **双像素边框问题**:可以通过设置`display: inline`来解决。 - **Min-height问题**:可以使用`important`来解决。 - **PNG透明问题**:可以使用JavaScript来实现。 - **...