您的位置：首页 > 其它

firefox下绝对定位元素重叠造成不可点击问题

2010-09-06 15:01 239 查看
重构地图网站过程中碰到的，firefox下（无论诡异模式或标准模式）当两个绝对定位的div发生重叠（即一个div盖在另一个div上）时，下面的div变得不可点击了。解决的方法是设置z-index，z-index值大的就可以点击了。而IE下，即使z-index值高的div，下面的div中的button仍然可以点击。

如下htmlbug重现：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>02.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<mce:style type="text/css"><!--
#d1{
position:absolute;
top:31%;
left:41%;
width:200px;
height:100px;
border:1px solid gray;
padding:5px;
/*z-index:1;*/
}
#d2{
position:absolute;
top:30%;
left:40%;
width:230px;
height:130px;
border:1px solid red;
/*z-index:2;*/
}

--></mce:style><style type="text/css" mce_bogus="1">		#d1{
position:absolute;
top:31%;
left:41%;
width:200px;
height:100px;
border:1px solid gray;
padding:5px;
/*z-index:1;*/
}
#d2{
position:absolute;
top:30%;
left:40%;
width:230px;
height:130px;
border:1px solid red;
/*z-index:2;*/
}

</style>
</head>

<body>

<div id="d1">
<input type="button" value="查询" onclick="alert(3);">
</div>
<div id="d2"></div>

</body>
</html>


可以试着修改两个div的z-index在firefox和IE下测试下。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航