ie6,ie7下a标签无法点击(转载)
前几天在做一个网站的引导页面,因为都是用图片,所以按钮需要用空a标签来做,发现a标签在IE6与IE7中点击无效中点击不了,其他浏览器都正常。一开始以为是z-index的问题,但不论z-index设置多大依然还是无效。代码大致如下:
<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,ie7下a标签无法点击(转载)的更多相关文章
- 空a标签 a标签空的情况下 IE6 IE7下点击无效
最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- IE6/IE7下:inline-block解决方案
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...
- ie6,ie7下设置overflow:auto下滚动条不起作用
今天遇到一个比较特殊的情况:ie6,ie7下设置overflow:auto下滚动条出来了但是滚动条不起任何作用,但在火狐,ie8,ie9,谷歌等浏览器下正常显示,解决方案:只需要加一个position ...
- IE6/IE7下:inline-block不兼容的问题
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素 ...
- 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
- inline-block和text-indent在IE6,IE7下同时使用的兼容问题解决方法
在实际应用中,考虑到seo,很多button,icon都要用到inline-block和text-indent来处理,例如: <a href="#">Button< ...
- IE6/IE7下绝对定位position:absolute和margin的冲突问题解决
首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...
- JavaScript在IE6,IE7下报错'expected identifier, string or number'
问题: 代码在Forefox和IE8下工作正常,但是在IE6下报错: expected identifier, string or number 假如变量options有多个选项,那么我们可以用逗号分 ...
随机推荐
- hdu1695
题解: 莫比乌斯反演 设f[i]=Σgcd(i,j)%z==0 则f[i]=Σgcd(i,j)==zd 成莫比乌斯反演关系 代码: #include<cstdio> #include< ...
- 团队项目开发特点以及NABCD分析总结
(注:此博客来源于韩晓凡,我们是一个团队) 团队项目的特点:开发的这款软件是从我们的日常生活中得到的启发,现在正是大学阶段,刚刚开始管理自己每个月的生活费,并且在大学中每个月的生活费会有很多去处,然而 ...
- Android : 网络adb配置及有线端口占用解决方法
一.调试环境: Android Debug Bridge version 1.0.40: Nexus6P平板(Android 8.0系统): 二.网络ADB调试: 1. Android设备除了用有线u ...
- ON 子句和 WHERE 子句的不同
原文: https://www.cnblogs.com/zjfjava/p/6041445.html 即使你认为自己已对 MySQL 的 LEFT JOIN 理解深刻,但我敢打赌,这篇文章肯定能让你学 ...
- python中的循环以及,continue和break的使用
循环 目标 程序的三大流程 while 循环基本使用 break 和 continue while 循环嵌套 01. 程序的三大流程 在程序开发中,一共有三种流程方式: 顺序 —— 从上向下,顺序执行 ...
- SharePoint REST API - 基本操作(二)
博客地址:http://blog.csdn.net/FoxDave 上一节讲了SharePoint REST API的一些基本操作,本节将继续介绍一些关于SharePoint REST API的内容. ...
- css 利用border 绘制三角形. triangle
1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 在 子 iframe中 点击一个按钮, 变换 这个 iframe的地址url.
//跳到测试结果: function jump() { console.log(self.parent.document.getElementById("iframe").src) ...
- finfo_file
本文实例讲述了PHP使用finfo_file()函数检测上传图片类型的实现方法.分享给大家供大家参考,具体如下: 在输入输出中,文件的交互必不可少,比如文件的上传什么的.这里我们来解决一个小问题, ...
- kali linux 入侵window实例
我使用Kali Linux的IP地址是192.168.0.112:在同一局域网内有一台运行Windows XP(192.168.0.108)的测试电脑. 本文演示怎么使用Metasploit入侵win ...