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


重构地图网站过程中碰到的,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下测试下。

 


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3