IE6下著名的z-index bug

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

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

<!DOCTYPE html>
<html>
<head>
<meta 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>

posted on 2011-03-03 08:31  snandy  阅读(3657)  评论(13编辑  收藏  举报