ie中绝对定位后的bug

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-07-22 13:28:28　-　阅:　-　评:0　-　积分:0

前几天在写一个项目《淘宝全屏海报代码生成器(网页版)》时发现一个很严重的问题，是什么问题呢？a标签绝对定位后在ie中会发生无法点击的现象！

由于该项目中有一个功能是“一图多链接”功能，正常情况下都是用热点来完成。但洒家是极不习惯用热点，于是便用a标签替代热点，最终的功能当然是一样的了。（注：这里的功能指画矩形的功能，并非不规则图形。）用a标签的话当然是需要绝对定位了，但是当洒家在生成代码后在ie下测试时发现一个很奇怪的现象，a标签奇迹般的消失了，这不科学啊！洒家利用jq来获取到a标签的大小，以及具体的位置，但鼠标滑过时却丝毫无反应。如果说找不到位置的话，但jq取值表明位置是正确的，为了更好的判断位置，洒家对其加了边框，这下该一目了然了吧。当洒家给其加上边框后，终于可以看到其位置了，但滑过时依旧无反应，只有当滑过边框时才会显示小手图标。洒家好像明白了什么，于是给其加上背景色，尼玛，坑爹！这小手完全显示了！如下图：

洒家开始猜测：当a标签内部有真实内容时方可正常被点击。经过一番测试折腾后，于是找到了以下几种方法。

方法一：不要使用“absolute”绝对定位，（若使用相对定位，负值时也会无法被选中！如下图：
）
当然有时我们还是要必须用到“absolute”绝对定位，这个并不是最好的方法

方法二：添加背景色，如果实际情况下是透明的时候可以使用opacity滤镜使其透明,具体写法：filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);/*ie,兼容淘宝店铺的唯一写法！*/opacity:0/*非ie*/。

方法三：添加背景图片，如果实际情况下是透明的时候可以使用opacity滤镜使其透明，详细写法同上。

方法四：使用background:url(about:blank)，ie6下悬浮时页面闪动也是用这种方法解决的。（推荐）

方法五：巧妙利用边框属性,如：border-left:200px dashed transparent;/*dashed 是为了兼容ie6下透明背景，详情请点击→纯css实现三角形方法兼容ie6！*/width:0

由于a标签默认是内联元素，洒家联想到其它内联元素可能也存在此问题，于是开始测试span,em起来了。由于ie下是支持“cursor:pointer”的，于是便以此属性来验证结果是最好不过的了。结果在意料之中：这些内联元素在ie下绝对定位后真的无法被选中！最后发现即使是像div这样的块级元素也存在此问题！解决方法依旧可以使用上面介绍的几种方法，最后附上述几种解决方法的源码供亲们测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie下内联元素绝对定位后的bug--艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="ie下内联元素绝对定位后无法点击,a标签绝对定位后被遮挡无法点击,内联元素绝对定位后的bug,ie bug,background:url(about:blank)">
<style type="text/css">
*{ margin:0; padding:0;}
a,span,em,i,b,strong{position:absolute;z-index:111;border:0;display:block;width:200px;height:100px;cursor:pointer;border:2px solid #f00;word-break:break-word;white-space:normal;}
</style>
</head>
<body>
<div  style="height:592px;text-align:center">
<img src="http://img02.taobaocdn.com/imgextra/i2/1756178567/TB2f0e.XVXXXXXZXXXXXXXXXXXX_!!1756178567.jpg" style="width:1920px;height:592px;"  border="0" title="ie下内联元素绝对定位后的bug背景图片">
<a href="http://www.yilingsj.com/code/" target="_blank" style=" position:relative; float:left;left:10px;top:-50px;border:2px solid #f00">a; position:relative;top:<br />-50px;</a>
<a href="http://www.yilingsj.com/code/" target="_blank" style="top:10px;left:220px;background-color:#f00;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);opacity:.2">a;  background-color:#f00;</a>
<a href="http://www.yilingsj.com/" target="_blank" style="top:10px;left:430px;background:url(http://img02.taobaocdn.com/imgextra/i2/1756178567/TB2f0e.XVXXXXXZXXXXXXXXXXXX_!!1756178567.jpg);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);opacity:.2">a;  背景图片</a>
<a href="http://www.yilingsj.com/code/" target="_blank" style="top:120px;left:10px;background:url(about:blank);">a;  background:url(about:blank);</a>
<a href="http://www.yilingsj.com/code/" target="_blank" style="top:120px;left:220px;border:0;border-left:200px dashed transparent;width:0;">a;  </a>
<strong style="top:120px;left:430px;background:url(about:blank);">strong</strong>
<span style="top:230px;left:10px;background:url(about:blank);">span</span>
<em style="top:230px;left:220px;background:url(about:blank);">em</em>
<i style="top:230px;left:430px;background:url(about:blank);">i</i>
<b style="top:10px;left:10px;background:url(about:blank);">b</b>
<div style="top: 340px;left: 10px; position:absolute; z-index:666;width:200px;height:100px;cursor:pointer;border:2px solid #f00;">div</div>
</div>
</body>
</html>

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2014-07-22/177.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！