重构地图网站过程中碰到的,firefox下(无论诡异模式或标准模式)当两个绝对定位的div发生重叠(即一个div盖在另一个div上)时,下面的div变得不可点击了。解决的方法是设置z-index,z-index值大的就可以点击了。而IE下,即使z-index值高的div,下面的div中的button仍然可以点击。
如下htmlbug重现:
Html代码
<!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">
<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;*/
}
</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下测试下。