a标签绝对定位，点击区域被图片遮挡（IE下）

最新推荐文章于 2023-06-08 14:07:27 发布

weixin_33835103

最新推荐文章于 2023-06-08 14:07:27 发布

阅读量516

点赞数 1

原文链接：http://www.cnblogs.com/gongshunkai/p/6259935.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img{border:none;display:block;width:120px;height:120px;}
		.arrow{width:200px;height:200px;position:absolute;top:30px;left:30px;border:3px solid #000000;display:block;}
	</style>
</head>
<body>
	<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i4/155650308168019538/TB2v65la5GO.eBjSZFjXXcU9FXa_!!0-saturn_solar.jpg_580x580Q90.jpg">
	<a href="#" class="arrow"></a>
</body>
</html>

黑框是整个a标签，图片与a标签重叠处无法点击，小手消失，IE10以下都如此，IE11没有测试。而且无论你给图片或是a标签套多少div，设置z-index，都无效。

我们再试试把a标签改成div试试看。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img{border:none;display:block;width:120px;height:120px;}
		.arrow{width:200px;height:200px;position:absolute;top:30px;left:30px;border:3px solid #000000;cursor:pointer;}
	</style>
</head>
<body>
	<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i4/155650308168019538/TB2v65la5GO.eBjSZFjXXcU9FXa_!!0-saturn_solar.jpg_580x580Q90.jpg">
	<div class="arrow"></div>
</body>
</html>

测试结果与a标签一样，鼠标移到图片与div重叠处，小手消失。

bug的解决方案：

我的方法是给绝对定位元素透明背景色：background:rgba(0,0,0,0); 这可以解决ie8以上的bug

可惜的是ie8以下无解决方案。

不要妄想用filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000,endColorstr=#88000000);

也不要妄想用background:#ffffff; opacity:0;，因为这会使元素内的内容全部看不见。

转载于:https://www.cnblogs.com/gongshunkai/p/6259935.html

weixin_33835103

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
a标签绝对定位，点击区域被图片遮挡（IE下）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img{border:none;display:block;width:120px;height:1...
复制链接

扫一扫