`
zhouyrt
  • 浏览: 1126719 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

FirefoxIECSSHTML 
阅读更多

重构地图网站过程中碰到的，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">

	<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下测试下。

 

 

  • 02.rar (529 Bytes)
  • 下载次数: 4
0
顶
0
踩
分享到：
| IE6双空白边bug
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics