在最近的一个项目中,遇到了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 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
分享到:
相关推荐
在IE6的環境下,如果網頁上有div區塊和下拉選單重疊在一起的時候,即使再怎麼調整下拉選單的z-index,下拉選單還是會把div區塊蓋住(在Firefox是正常的),google了一下網路上的資料,大多是用iframe來解這個問題,但...
本文将重点讨论如何利用jQuery插件来解决在Internet Explorer 6(IE6)浏览器中遇到的一个常见问题:当尝试为`<select>`元素设置`z-index`属性时,该设置往往无效,导致元素无法正确地覆盖其他内容。这个问题在现代...
今天我说说iframe解决的一般方法,已经使用jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。 解决方法之一:Iframe包裹select元素 使用iframe包住select,这样iframe有z-index,只要在div上设置的z-...
1. **IE6/IE7中的<select>元素问题**:在IE6/IE7中,<select>元素的z-index值总是比其他元素高,即使它的z-index值设置得更低。这可能导致<select>元素覆盖其他元素,即使其他元素的z-index值更高。 2. **IE6/IE7...
在IE浏览器中,由于历史兼容性问题,开发者需要特别注意`z-index`的处理方式,尤其是在早期版本的IE中,可能会遇到一些预料之外的行为。 总的来说,`z-index`是CSS中一个强大但有时也容易让人困惑的属性。要正确地...
"解决IE6中 Div层挡不住Select组件"这个问题是一个典型的例子,它反映了IE6在CSS层叠样式和Z-index处理上的独特行为。 在现代浏览器中,我们可以利用CSS的`z-index`属性来控制元素的前后堆叠顺序,从而让某些元素...
这个IFrame可以解决IE6中的z-index问题,使元素能够正确地遮挡住`<select>`。使用bgiframe时,需要引入jQuery库和bgiframe插件,并调用相应的方法将插件应用到目标元素上。 2. 创建透明IFrame:不依赖jQuery的情况...
本文将深入探讨PoshyTip在IE6下被`<select>`元素遮罩的问题,以及如何解决这个问题。 首先,我们需要理解IE6的布局和渲染机制。IE6采用的是“hasLayout”模型,其中某些元素(如`<select>`)在页面上拥有特殊的渲染...
对于特定情况,例如`Flash`元素和IE6下的`select`元素,可能需要特殊的处理,如更改`wmode`属性或使用`iframe`来解决窗口元素的遮挡问题。 总结来说,理解`position`定位和`z-index`的关系是解决元素重叠问题的关键...
本文将深入探讨如何利用jQuery解决一个特定的问题:在IE6下,Select元素总是显示在具有较高z-index的图层(如div)之上。 首先,我们要理解z-index的概念。在CSS中,z-index是一个用于控制元素在垂直方向(即Z轴)...
在处理窗口元素(如Flash)或特定浏览器(如IE6下的`select`元素)时,可能会遇到窗口元素遮挡非窗口元素的问题。此时,可以通过调整`wmode`属性、使用`iframe`或模拟`select`效果来解决。 总的来说,理解和熟练...
在IE6浏览器中,由于其独特的布局模型,经常会出现Select元素覆盖Div元素的情况,这个问题让很多前端开发者头疼。本文将详细解析这个问题的原因,并提供多种有效的解决办法。 首先,我们需要了解问题的根本原因。在...
到新地方有些日子了,差不多适应了这边的工作节奏与流程。...可是真有些日子没有写DIV+CSS了,而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目),...z-index属性z-index规范参考在IE下出现的问题在IE6下z-index的问题
但在IE6中,select元素具有一个特殊的默认z-index,即使其值较低,它仍然会浮在其他元素之上,特别是浮动或绝对定位的元素,如EasyUI的dialog。 解决这个问题的方法有几种: 1. **修改CSS**:为弹出窗口的div添加...
标题“ie6下select遮挡div”指出的是一个典型的IE6特有的问题:当在网页上使用select下拉框时,它会覆盖在其他使用绝对或相对定位的元素(如div)之上,导致这些元素无法正常显示。这个问题对于设计美观且交互性强的...
IE6在处理浮动元素和绝对定位元素时,有时会忽略z-index属性,尤其是当这些元素与`<select>`元素重叠时。`<select>`元素在IE6中具有较高的默认堆栈顺序,导致其他浮动或绝对定位的元素无法在其上方显示。 解决这个...
这是因为IE6对`z-index`的处理方式与现代浏览器不同,它不尊重非定位元素(如`select`)的`z-index`属性。 为了解决这个问题,我们可以使用JavaScript来动态地改变`select`元素的样式,使其在需要隐藏时失去焦点并...
IE6和IE7在处理Z-index时也有其特定的规则。理解这些规则对于解决跨浏览器兼容性问题是至关重要的。 **IE6/IE7规则:** 1. **父级层叠上下文的背景、边界**。 2. **Z-index值为负值的定位元素**(值越小越靠下)。...
通常,`div`元素比`select`元素有更高的默认`z-index`,但某些浏览器(尤其是IE6和7)可能会忽略这一点,导致`div`无法覆盖`select`。 1. **创建堆叠上下文:** 确保`div`和`select`元素都存在于同一个堆叠上下文中...