之前一直听说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:有时候背景色真的能解决大问题,之前也遇到过类似莫名奇妙的问题)