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判断了。