【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:有時候背景色真的能解決大問題，之前也遇到過類似莫名奇妙的問題）