浏览 13780 次
|
锁定老帖子 主题：IE6下著名的z-index bug
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (15)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-01-05
最后修改：2009-05-14
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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-01-06
最后修改：2009-01-06
我在ie7下，去掉iframe也没有问题啊。不知道ie6如何？
只是处理不了activex对象 |
| 返回顶楼 | |
|
发表时间：2009-01-06
hanjs 写道 我在ie7下，去掉iframe也没有问题啊。不知道ie6如何？ 只是处理不了activex对象 是的，在IE8下也没问题了。看来在IE7后就微软就解决这个bug了 |
| 返回顶楼 | |
|
发表时间：2009-01-06
是的，这个问题只在IE6中存在。
|
| 返回顶楼 | |
|
发表时间：2009-01-06
只存在IE6下，而且如果遮盖层下的select如果是可滚动的，在滚动的时候iframe还是该不住，最好的办法就是用div定制select框
|
| 返回顶楼 | |
|
发表时间：2009-01-06
还有个办法，就是要盖住它时隐藏它，不盖了再显示它。
|
| 返回顶楼 | |
