首页 > 代码库 > ie中绝对定位后的bug

ie中绝对定位后的bug

2024-07-14 16:36:37   225人阅读

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

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

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

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

方法二：添加背景色，如果实际情况下是透明的时候可以使用opacity滤镜使其透明,具体写法：

1 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);/*ie,兼容淘宝店铺的唯一写法！*/2 opacity:0/*非ie*/

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

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

方法五：巧妙利用边框属性,如：

1 border-left:200px dashed transparent;/*dashed 是为了兼容ie6下透明背景*/2 width:0

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

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>ie下内联元素绝对定位后的bug--艺灵设计，qq群：231749938</title> 6 <meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com"> 7 <meta name="keywords" content="ie下内联元素绝对定位后无法点击,a标签绝对定位后被遮挡无法点击,内联元素绝对定位后的bug,ie bug,background:url(about:blank)"> 8 <style type="text/css"> 9 *{ margin:0; padding:0;}10 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;}11 </style>12 </head>13 <body>14 <div style="height:592px;text-align:center">15 <img src="http://img02.taobaocdn.com/imgextra/i2/1756178567/TB2f0e.XVXXXXXZXXXXXXXXXXXX_!!1756178567.jpg" style="width:1920px;height:592px;" border="0" title="ie下内联元素绝对定位后的bug背景图片">16 <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>17 <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>18 <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>19 <a href="http://www.yilingsj.com/code/" target="_blank" style="top:120px;left:10px;background:url(about:blank);">a; background:url(about:blank);</a>20 <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>21 <strong style="top:120px;left:430px;background:url(about:blank);">strong</strong>22 <span style="top:230px;left:10px;background:url(about:blank);">span</span>23 <em style="top:230px;left:220px;background:url(about:blank);">em</em>24 <i style="top:230px;left:430px;background:url(about:blank);">i</i>25 <b style="top:10px;left:10px;background:url(about:blank);">b</b>26 <div style="top: 340px;left: 10px; position:absolute; z-index:666;width:200px;height:100px;cursor:pointer;border:2px solid #f00;">div</div>27 </div>28 </body>29 </html>

 原文首发地址：http://www.yilingsj.com/div/2014-07-22/177.html


联系
我们