IE6下a标签无法点击bug 以及扩展
2012-12-19 14:42
323 查看
前几天在做一个网站的引导页面,因为都是用图片,所以按钮需要用空a标签来做,发现a标签在IE6与IE7中点击无效中点击不了,其他浏览器都正常。一开始以为是z-index的问题,但不论z-index设置多大依然还是无效。代码大致如下:
给a标签添加文字后,发现只有鼠标放到文字上会成手型(说明能点击),而放到文字外面却不是手型,无论a标签的宽高有多大都不行。于是随意给a标签添加了一个background意外的发现鼠标在非文字区域(但在a标签里面)也能成手型,然后尝试将文字去掉依然可以成手型,于是也就找到了问题之所在了。
最后得出了结论:
如果给空a标签定义了宽度和高度且使用了absolute,则在IE6和IE7中点击无效。
也找到了两种解决方法(主要是针对a标签不能设置背景情况):
1、给a标签添加样式:background:url(about:blank);
2、给a标签随便添加背景色或者背景图片,然后将a标签的透明度设置为0,不过在IE中需要使用滤镜,即 opacity:0;filter:alpha(opacity=0);
扩展:
在做一个hover下的半透明遮罩层时候遇到的,结构大致如下:
在IE6下 hover_box的确是半透明了 但是在hover_box上却可以点击到下一层的a标签(hover_box下的内容则可以挡住,不会点到a标签)
解决办法:同上
<a style="position:absolute; top:0; left:0; display:block; width:100px; height:50px;" href="#"></a>
给a标签添加文字后,发现只有鼠标放到文字上会成手型(说明能点击),而放到文字外面却不是手型,无论a标签的宽高有多大都不行。于是随意给a标签添加了一个background意外的发现鼠标在非文字区域(但在a标签里面)也能成手型,然后尝试将文字去掉依然可以成手型,于是也就找到了问题之所在了。
最后得出了结论:
如果给空a标签定义了宽度和高度且使用了absolute,则在IE6和IE7中点击无效。
也找到了两种解决方法(主要是针对a标签不能设置背景情况):
1、给a标签添加样式:background:url(about:blank);
2、给a标签随便添加背景色或者背景图片,然后将a标签的透明度设置为0,不过在IE中需要使用滤镜,即 opacity:0;filter:alpha(opacity=0);
扩展:
在做一个hover下的半透明遮罩层时候遇到的,结构大致如下:
<ul class="clearfix_after"> <li class="hover"> <div class="hover_box"> <p>文字文字文字文字文字</p> </div> <a class="pic" href="" title=""> <img src="img/pic_17.jpg" width="149" height="192" alt="" /> </a> </li> </ul>
li{ width:149px; height:192px; position:relative; float:left; margin-right:7px; } .hover_box{ display:none; position:absolute; z-index:2; width:149px; height:192px; top:0; left:0; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000', endColorstr='#99000000'); background:rgba(0,0,0,0.6); color:#FFF; /*background-image:url(about:blank);*/ } .hover .hover_box{display:block;} .pic{display:block;position:relative;z-index:1;} .pic img{display:block;}
在IE6下 hover_box的确是半透明了 但是在hover_box上却可以点击到下一层的a标签(hover_box下的内容则可以挡住,不会点到a标签)
解决办法:同上
相关文章推荐
- IE6下a标签无法点击bug 以及扩展
- IE6下a标签无法点击bug----position和定义的宽度和高度
- ie6,ie7下a标签无法点击
- IE6 中 window.location.href 不能跳转 以及关于a标签点击返回顶部的解决方法
- a标签position为absolute时,IE无法点击(a position:absolute bug ie)
- IE6下使用滤镜后链接无法点击的BUG
- a标签点击跳转失效--IE6、7的奇葩bug
- a标签position为absolute时,IE无法点击(a position:absolute bug ie)
- IE6 P标签下DIV无法inline-block
- IE6下z-index层以及绝对定位的PNG背景透明层中<a>标签链接失效的解决办法
- 【IE6的疯狂之十三】IE6下使用滤镜后链接不能点击的BUG
- H5页面,iOS以及部分Android手机链接a等标签点击的时候,会有阴影,怎么解决?
- ExtJs2.2的grid的2个Bug:滚动条以及点击点击行后发生偏移问题
- 谷歌Pixel手机近期一直bug不断,除了Android Auto服务以及谷歌闹钟Bug外,据外媒Androidpolice报道称,最近部分Pixel手机被曝光无法接收文字短信,谷歌已经确认该bug的
- [技巧] IE6中常见的CSS bug集合以及解决方案
- IE7下a标签下包含图片时无法点击的问题
- js在ie6下的一个bug—未结束标签的错误
- Word文档内容无法选中以及点击鼠标无反应的问题(PowerDesigner 12.5 导致)
- PowerDesigner 125 导致 Word 2007文档内容无法选中以及点击鼠标没用
- 在Firefox下js select标签点击无法弹出