【ie兼容性】ie10及以下带img的absolute定位，导致点击事件无效

之前一直听说ie浏览器对absolute定位不兼容，但从未发现哪不兼容，这次算是遇大坑了。

原来ie并不是对单个absolute样式不兼容，而是跟其他东西联系在一起时会出现一下莫名奇妙的问题，如本人刚遇到的：

“定位后的div中加入img和div，子div若不加背景色，点击事件（任何事件）无效”

（如果你遇到一定要加背景色，点击事件才生效的情况，可能就是这原因）

示例：

html：

<div class="a1">
		<img src="http://www.baidu.com/img/bd_logo1.png" />
		<div class="ared"></div>
		<div class="ablue"></div>
	</div>

css：

.a1{
width:400px;
height:200px;
position: relative;
border:1px solid blue;
}
.ablue{
width:170px;
height:200px;
position: absolute;
border:10px solid blue;
left:0;
top:0;
}
.ared{
border:10px solid red;
width:170px;
height:200px;
position: absolute;
right:0;
top:0;
}

js：

	$(".ared").click(function(){
		alert("red");
	});
	$(".ablue").click(function(){
		alert("blue");
	});
	$(".a1>img").click(function(){
		alert("img");
	});

效果如下：

1、点击蓝边框弹出blue，点击红边框弹出red。（符合正常逻辑）

2、点击边框内部弹出img。（非正常逻辑，chome中弹出正常）

正常情况下，点击边框内容弹出的内容应该与点击边框弹出的内容一致，但是ie却识别为点击的是底部图片。

原因：

个人认为，此种情况下，ie识别对象的时候只识别到了样式中加了颜色的部分，边框、背景，即便是透明背景也能识别。

（若去掉底部图片，一切正常）

解决方法：

若遇到类似一定要用到img和absolute，并且要调用事件的情况，可采取以下办法：

1、给div本身加透明背景色（前提是该div里没有内容，否则内容也会被透明）

2、在图片与div之间再加一层带有透明背景色的div，如：

	<div class="a1">
		<img src="http://www.baidu.com/img/bd_logo1.png" />
		<div style="background:#fff;opacity:0;position: absolute;width:100%;height:100%;top:0"></div>
		<div class="ared"></div>
		<div class="ablue"></div>
	</div>

（ps:有时候背景色真的能解决大问题，之前也遇到过类似莫名奇妙的问题）