`
jialuweb
  • 浏览: 32621 次
  • 性别: Icon_minigender_1
  • 来自: 陕西西安
社区版块
存档分类
最新评论

IE6 select z-index 显示相关问题

阅读更多
在最近的一个项目中,遇到了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之Select的Z-Index設定【解决IE6的z-indexBUG】

    在IE6的環境下,如果網頁上有div區塊和下拉選單重疊在一起的時候,即使再怎麼調整下拉選單的z-index,下拉選單還是會把div區塊蓋住(在Firefox是正常的),google了一下網路上的資料,大多是用iframe來解這個問題,但...

    jQuery中使用插件解决ie6下selectfqg元素设置z-index无效的问题!

    本文将重点讨论如何利用jQuery插件来解决在Internet Explorer 6(IE6)浏览器中遇到的一个常见问题:当尝试为`&lt;select&gt;`元素设置`z-index`属性时,该设置往往无效,导致元素无法正确地覆盖其他内容。这个问题在现代...

    IE6 select z-index无效,遮挡div bug的解决方法

    今天我说说iframe解决的一般方法,已经使用jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。 解决方法之一:Iframe包裹select元素 使用iframe包住select,这样iframe有z-index,只要在div上设置的z-...

    css里的z-index的使用

    1. **IE6/IE7中的&lt;select&gt;元素问题**:在IE6/IE7中,&lt;select&gt;元素的z-index值总是比其他元素高,即使它的z-index值设置得更低。这可能导致&lt;select&gt;元素覆盖其他元素,即使其他元素的z-index值更高。 2. **IE6/IE7...

    学习CSS网页制作:z-index在IE中的迷惑.pdf

    在IE浏览器中,由于历史兼容性问题,开发者需要特别注意`z-index`的处理方式,尤其是在早期版本的IE中,可能会遇到一些预料之外的行为。 总的来说,`z-index`是CSS中一个强大但有时也容易让人困惑的属性。要正确地...

    解决IE6中 Div层挡不住Select组件

    "解决IE6中 Div层挡不住Select组件"这个问题是一个典型的例子,它反映了IE6在CSS层叠样式和Z-index处理上的独特行为。 在现代浏览器中,我们可以利用CSS的`z-index`属性来控制元素的前后堆叠顺序,从而让某些元素...

    解决IE6 中select 穿透 div 等层的问题

    这个IFrame可以解决IE6中的z-index问题,使元素能够正确地遮挡住`&lt;select&gt;`。使用bgiframe时,需要引入jQuery库和bgiframe插件,并调用相应的方法将插件应用到目标元素上。 2. 创建透明IFrame:不依赖jQuery的情况...

    poshytip插件在IE6中,被select遮罩问题

    本文将深入探讨PoshyTip在IE6下被`&lt;select&gt;`元素遮罩的问题,以及如何解决这个问题。 首先,我们需要理解IE6的布局和渲染机制。IE6采用的是“hasLayout”模型,其中某些元素(如`&lt;select&gt;`)在页面上拥有特殊的渲染...

    浅析CSS--元素重叠及position定位的z-index顺序.docx

    对于特定情况,例如`Flash`元素和IE6下的`select`元素,可能需要特殊的处理,如更改`wmode`属性或使用`iframe`来解决窗口元素的遮挡问题。 总结来说,理解`position`定位和`z-index`的关系是解决元素重叠问题的关键...

    Jquery 解决IE6 Select 框总是在图层(div)的上面显示的BUG

    本文将深入探讨如何利用jQuery解决一个特定的问题:在IE6下,Select元素总是显示在具有较高z-index的图层(如div)之上。 首先,我们要理解z-index的概念。在CSS中,z-index是一个用于控制元素在垂直方向(即Z轴)...

    浅析CSS--元素重叠及position定位的z-index顺序.pdf

    在处理窗口元素(如Flash)或特定浏览器(如IE6下的`select`元素)时,可能会遇到窗口元素遮挡非窗口元素的问题。此时,可以通过调整`wmode`属性、使用`iframe`或模拟`select`效果来解决。 总的来说,理解和熟练...

    ie6下select覆盖div的解决办法

    在IE6浏览器中,由于其独特的布局模型,经常会出现Select元素覆盖Div元素的情况,这个问题让很多前端开发者头疼。本文将详细解析这个问题的原因,并提供多种有效的解决办法。 首先,我们需要了解问题的根本原因。在...

    ie下的css层叠z-index各种问题详细整理

    到新地方有些日子了,差不多适应了这边的工作节奏与流程。...可是真有些日子没有写DIV+CSS了,而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目),...z-index属性z-index规范参考在IE下出现的问题在IE6下z-index的问题

    IE6下 Jquery EasyUI 弹出窗口层无法挡住select 组件 解决方案

    但在IE6中,select元素具有一个特殊的默认z-index,即使其值较低,它仍然会浮在其他元素之上,特别是浮动或绝对定位的元素,如EasyUI的dialog。 解决这个问题的方法有几种: 1. **修改CSS**:为弹出窗口的div添加...

    ie6下select遮挡div

    标题“ie6下select遮挡div”指出的是一个典型的IE6特有的问题:当在网页上使用select下拉框时,它会覆盖在其他使用绝对或相对定位的元素(如div)之上,导致这些元素无法正常显示。这个问题对于设计美观且交互性强的...

    解决IE6下三级下拉菜单被select遮挡的问题.docx

    IE6在处理浮动元素和绝对定位元素时,有时会忽略z-index属性,尤其是当这些元素与`&lt;select&gt;`元素重叠时。`&lt;select&gt;`元素在IE6中具有较高的默认堆栈顺序,导致其他浮动或绝对定位的元素无法在其上方显示。 解决这个...

    ie6下DIV覆盖select框js解决代码

    这是因为IE6对`z-index`的处理方式与现代浏览器不同,它不尊重非定位元素(如`select`)的`z-index`属性。 为了解决这个问题,我们可以使用JavaScript来动态地改变`select`元素的样式,使其在需要隐藏时失去焦点并...

    IE6兼容笔记

    IE6和IE7在处理Z-index时也有其特定的规则。理解这些规则对于解决跨浏览器兼容性问题是至关重要的。 **IE6/IE7规则:** 1. **父级层叠上下文的背景、边界**。 2. **Z-index值为负值的定位元素**(值越小越靠下)。...

    让div浮动在select之上的完美解决方案!多浏览器兼容

    通常,`div`元素比`select`元素有更高的默认`z-index`,但某些浏览器(尤其是IE6和7)可能会忽略这一点,导致`div`无法覆盖`select`。 1. **创建堆叠上下文:** 确保`div`和`select`元素都存在于同一个堆叠上下文中...

Global site tag (gtag.js) - Google Analytics