源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2010-6-18 22:22:06 | 显示全部楼层 |阅读模式
在最近的一个项目中,遇到了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" 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
回复

使用道具 举报

1

主题

2万

回帖

79

积分

注册会员

Rank: 2

积分
79
发表于 2022-10-21 07:10:26 | 显示全部楼层
hi哦和烦恼农家女
回复 支持 反对

使用道具 举报

16

主题

2万

回帖

376

积分

中级会员

Rank: 3Rank: 3

积分
376
发表于 2023-1-3 18:06:25 | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

499

积分

中级会员

Rank: 3Rank: 3

积分
499
发表于 2023-3-15 21:37:11 | 显示全部楼层
而快乐你们快乐马年快乐
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-5-17 20:54:31 | 显示全部楼层
的谁vdvdsvdsvdsdsv
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

321

积分

中级会员

Rank: 3Rank: 3

积分
321
发表于 2023-8-29 20:16:45 | 显示全部楼层
了乐趣了去了去了去了去了
回复 支持 反对

使用道具 举报

4

主题

1万

回帖

60

积分

注册会员

Rank: 2

积分
60
发表于 2023-11-17 23:07:30 | 显示全部楼层
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-12-11 19:52:54 | 显示全部楼层
哦哦哦ijhhsdj
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

155

积分

注册会员

Rank: 2

积分
155
发表于 2024-3-29 23:28:14 | 显示全部楼层
逛逛看看瞧瞧
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-5-7 02:12:47 | 显示全部楼层
笑纳了老板
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-23 21:18 , Processed in 0.151107 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表