ie中绝对定位后的bug
2014-07-29 16:23
253 查看
前几天在写一个项目《淘宝全屏海报代码生成器(网页版)》时发现一个很严重的问题,是什么问题呢?a标签绝对定位后在ie下会发生无法点击的现象!
由于该项目中有一个功能是“一图多链接”功能,正常情况下都是用热点来完成。但洒家是极不习惯用热点,于是便用a标签替代热点,最终的功能当然是一样的了。(注:这里的功能指画矩形的功能,并非不规则图形。)用a标签的话当然是需要绝对定位了,但是当洒家在生成代码后在ie下测试时发现一个很奇怪的现象,a标签奇迹般的消失了,这不科学啊!洒家利用jq来获取到a标签的大小,以及具体的位置,但鼠标滑过时却丝毫无反应。如果说找不到位置的话,但jq取值表明位置是正确的,为了更好的判断位置,洒家对其加了边框,这下该一目了然了吧。当洒家给其加上边框后,终于可以看到其位置了,但滑过时依旧无反应,只有当滑过边框时才会显示小手图标。洒家好像明白了什么,于是给其加上背景色,尼玛,坑爹!这小手完全显示了!如下图:
洒家开始猜测:当a标签内部有真实内容时方可正常被点击。经过一番测试折腾后,于是找到了以下几种方法。
方法一:不要使用“absolute”绝对定位,(若使用相对定位,负值时也会无法被选中!如下图:
)
当然有时我们还是要必须用到“absolute”绝对定位,这个并不是最好的方法
方法二:添加背景色,如果实际情况下是透明的时候可以使用opacity滤镜使其透明,具体写法:
方法三:添加背景图片,如果实际情况下是透明的时候可以使用opacity滤镜使其透明,详细写法同上。
方法四:使用background:url(about:blank),ie6下悬浮时页面闪动也是用这种方法解决的。(推荐)
方法五:巧妙利用边框属性,如:
由于a标签默认是内联元素,洒家联想到其它内联元素可能也存在此问题,于是开始测试span,em起来了。由于ie下是支持“cursor:pointer”的,于是便以此属性来验证结果是最好不过的了。结果在意料之中:这些内联元素在ie下绝对定位后真的无法被选中!最后发现即使是像div这样的块级元素也存在此问题!解决方法依旧可以使用上面介绍的几种方法,最后附上述几种解决方法的源码供亲们测试:
原文首发地址:http://www.yilingsj.com/div/2014-07-22/177.html
由于该项目中有一个功能是“一图多链接”功能,正常情况下都是用热点来完成。但洒家是极不习惯用热点,于是便用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下透明背景*/ 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>
原文首发地址:http://www.yilingsj.com/div/2014-07-22/177.html
相关文章推荐
- IE下当a标签使用position:absolute绝对定位时没有点击区域的bug
- IE6、IE7下绝对定位position:absolute和margin的冲突bug解决方法
- IE中a标签绝对定位时才生的bug
- IE6、IE7下绝对定位position:absolute和margin的冲突bug解决方法
- IE7局部滚动区域下绝对定位或相对定位元素不随滚动条滚动的bug
- A标签绝对定位后IE下不可点击问题
- IE绝对定位元素神秘消失
- 关于相对定位、绝对定位在ie6下bug的三个问题
- 【IE bug 解决办法】IE下(IE10及以下)当元素为absolute定位时,点击事件失效的解决办法 分类: ie ie bug ie absolute click 2015-06-26 11:05 21人阅读 评论(0) 收藏
- IE6下绝对定位BUG
- 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG
- IE6绝对定位的bug及其解决办法
- IE绝对定位元素始终被遮挡或者消失的解决方法
- IE6绝对定位的bug及其解决办法
- IE中a标签绝对定位设置高宽却无法点击的问题
- 【IE bug 解决办法】IE下(IE10及以下)当元素为absolute定位时,点击事件失效的解决办法
- IE绝对定位元素神秘消失或被遮挡的解决
- IE刷新页面才能正常定位的BUG(转载)
- css IE与FF 绝对定位的默认 位置
- IE6父级使用padding后子元素绝对定位的BUG