<!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;，因為這會使元素內的內容全部看不見。