IE9- 图片|遮挡|绝对|定位|元素的|解决|办法
<!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;，因为这会使元素内的内容全部看不见。
兼容IE 8到IE 9的办法.用一层父级元素包裹img和绝对定位元素，对于不重叠的部分就只能通过js判断了。