`
落地窗
  • 浏览: 443205 次
  • 性别: 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
分享到:
评论

相关推荐

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

    本文将重点讨论如何利用jQuery插件来解决在Internet Explorer 6(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-...

    SELECT在浏览器中相关Bug整理

    IE6下的select 的 z-index始终高于其他元素,即无法被其他元素覆盖住。 解决方法:JQueryUI的做法是在IE6下当触发弹出层时,将想覆盖住的select隐藏 在IE7及以下 虽然disabled 对 select能起作用,但对select下的...

    jquery 遮罩层

    **描述**:当 `dialog` 在 IE6 浏览器下使用时,可能会遇到 z-index 无效的问题,导致 select 下拉框被遮挡。 **代码**: ```javascript // 启用 bgiframe 功能来解决 IE6 下的 z-index 问题。 $(".selector")....

    web前端面试题.pdf

    可以继承的CSS属性包括font-size、font-family、color、ul li dl dd dt等字体属性和列表属性。 10. CSS优先级算法 CSS优先级算法包括!important &gt; id &gt; class &gt; 标签,!important比内联优先级高,以最后载入的样式...

    在浏览器窗口上添加遮罩层的方法

    同时,由于IE6中`height:100%`无效,我们需要通过JavaScript动态计算并设置遮罩层的高度和宽度,以确保完全覆盖浏览器窗口。 ```javascript function calculateSize() { var b = document.documentElement....

Global site tag (gtag.js) - Google Analytics