`
落地窗
  • 浏览: 439540 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE6 select列表 z-index属性无效

阅读更多
以下为网上通用解决办法
解决方法之一:Iframe包裹select元素
使用iframe包住select,这样iframe有z-index,只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性,不可能每个select都要加个iframe吧?所以不推荐!代码如下:

<iframe style="z-index:1" style="z-index:1"><!-- 用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插件如`select-fix`通过巧妙的方式解决了IE6下`&lt;select&gt;`元素`z-index`无效的问题,使得开发者在兼容旧版浏览器的同时,也能实现预期的页面布局效果。然而,随着技术的发展,对于不再支持这些老版本...

    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...

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

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

    ActiveX插件的Z-Index属性无效问题解决

    综上所述,解决ActiveX插件或有窗体元素的z-index属性无效问题有多种方法。最传统的方法是通过iframe手动调整层叠顺序,而借助jQuery等JavaScript库或特定前端框架的支持,则可以更简便地解决这一问题。这些方法在...

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

    在IE5.5及更高版本中,`iframe`开始支持`z-index`,但在更早的版本中,`iframe`被视为窗口控件,因此会忽略`z-index`属性。 `z-index`的工作原理涉及到一个叫做"stacking context"的概念。每个定位元素都在一个栈中...

    ie6下select覆盖div的解决办法

    这种行为是由于IE6对CSS层叠上下文理解的局限性,以及对z-index属性的不完全支持导致的。 为了解决这个问题,我们可以尝试以下几种策略: 1. **绝对定位与z-index**:首先,给被覆盖的Div设置`position: relative;...

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

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

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

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

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

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

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

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

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

    然而,IE6的Z-index处理有时并不完全遵循现代浏览器的标准,因此可能需要进行更复杂的调整。 在`poshytipExt.js`这个文件中,我们可能需要找到设置提示框CSS属性的部分,特别是Z-index属性,并尝试增加其数值。例如...

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

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

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

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

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

    总的来说,处理IE6的这种问题需要深入理解浏览器的渲染机制和CSS的z-index属性。在实际项目中,开发者应根据具体需求和用户群体选择合适的解决方案,平衡兼容性和用户体验。同时,随着技术的发展,逐渐淘汰对过时...

    select-option-disabled-emulation.zip_OPTION_select option_select

    select-option-disabled-emulation.js解决IE6 Select 中 option 的disabled属性无效的办法~~~在页面加载时架子该js,呵呵有点问题:onchange 时间冲突 自己改改··

    ie8-select滚动条

    在IE8浏览器中,"ie8-select滚动条"是一个与网页设计和开发相关的技术问题,主要涉及到CSS样式、JavaScript以及浏览器兼容性。在IE8及其以下版本,原生的HTML `&lt;select&gt;` 元素的滚动条样式无法通过CSS直接自定义,这...

Global site tag (gtag.js) - Google Analytics