IE6下著名的z-index bug

zhouyrt

浏览: 1162199 次
性别:
来自: 北京

最近访客更多访客>>

a612986

tweenkin

zymdev

小白到此一游

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

IE QQ Firefox CSS HTML

abcc项目实现这样一个功能：点击“上载查询”，弹出一个绝对定位的div（类似qq文件中转站的“上传文件”按钮），里面有上传按钮等，点击后div在最上层。即z-index为最大。在firefox下表现良好，在IE6下无论如何也盖不住select。墨墨说是IE下一个著名的bug，解决方法用一个iframe包住select。

以下是一个测试的静态html，为bug重现及及解决方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

	<style type="text/css">	
	
		#d1,#d2 {
			width:	400px;
			height : 400px;
		}
		#d1 {		
			position : absolute;
			top : 100px;
			background : red;
			z-index : 1;
		}
		#d2 {
			position : absolute;
			top : 150px;
			background : blue;
			z-index : 2;
		}

	</style>
</head>
<body>	
	
	<div id="d1">	
		<form>			
			<input type="text" name="username"/>
		</form>
		<p>中國</p>
		<form>
			<iframe 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>
		</form>
	</div>
	
	<div id="d2">ddd</div>

</body>
</html>

分享到：

js克隆一个数组 | JVM启动时的三个类加载器

2009-01-05 14:55
浏览 7808
评论(5)
论坛回复 / 浏览 (5 / 13781)
分类:Web前端
查看更多

5 楼 andot 2009-01-06

还有个办法，就是要盖住它时隐藏它，不盖了再显示它。

4 楼冯冀川 2009-01-06

只存在IE6下，而且如果遮盖层下的select如果是可滚动的，在滚动的时候iframe还是该不住，最好的办法就是用div定制select框

3 楼 longleg 2009-01-06

是的，这个问题只在IE6中存在。

2 楼 zhouyrt 2009-01-06

hanjs 写道

我在ie7下，去掉iframe也没有问题啊。不知道ie6如何？

只是处理不了activex对象

是的，在IE8下也没问题了。看来在IE7后就微软就解决这个bug了

1 楼 hanjs 2009-01-06

我在ie7下，去掉iframe也没有问题啊。不知道ie6如何？

只是处理不了activex对象

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论