前几天在做一个网站的引导页面,因为都是用图片,所以按钮需要用空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标签无法点击(转载)的更多相关文章

  1. 空a标签 a标签空的情况下 IE6 IE7下点击无效

    最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...

  2. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  3. IE6/IE7下:inline-block解决方案

    IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...

  4. ie6,ie7下设置overflow:auto下滚动条不起作用

    今天遇到一个比较特殊的情况:ie6,ie7下设置overflow:auto下滚动条出来了但是滚动条不起任何作用,但在火狐,ie8,ie9,谷歌等浏览器下正常显示,解决方案:只需要加一个position ...

  5. IE6/IE7下:inline-block不兼容的问题

    IE6/IE7下对display:inline-block的支持性不好.    1.inline元素的display属性设置为inline-block时,所有的浏览器都支持:    2.block元素 ...

  6. 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

    一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

  7. inline-block和text-indent在IE6,IE7下同时使用的兼容问题解决方法

    在实际应用中,考虑到seo,很多button,icon都要用到inline-block和text-indent来处理,例如: <a href="#">Button< ...

  8. IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

    首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...

  9. JavaScript在IE6,IE7下报错'expected identifier, string or number'

    问题: 代码在Forefox和IE8下工作正常,但是在IE6下报错: expected identifier, string or number 假如变量options有多个选项,那么我们可以用逗号分 ...

随机推荐

  1. nginx:负载均衡实战(二) keepalived入门

    1.keepalived介绍 顾名思义,keepalived就是保持网络在线的,用来保证集群高可用HA的服务软件.主要防止出现单点故障(坏了一个点导致整个系统架构不可用) 2.详解keepalived ...

  2. 将远程mysql服务器数据导出 csv 并发送到我的本机

    1.在SQL上执行查询并导出操作 '; 2.发送到本机 SQL>system sz idIsNull2.csv;

  3. mac系统下安装Composer和laravel

    先手动下载Composer 地址:https://getcomposer.org/composer.phar 下载后mv composer.phar /usr/local/bin/composer 这 ...

  4. 读书笔记 C# 接口中的索引器之浅析

    在C#中,可以在类.结构或接口中用this关键字声明索引器,在索引器内部用get或set访问器访问类中集合的某项值.因此可以将索引器看作是类的属性一样去定义.索引器常用定义格式如下: public i ...

  5. 深入理解Connector

    上一篇主要是从各个容器的生命周期的角度讲了一下整个tomcat的运行流程,说明了各个容器之间的调用关系.但并没有太过详细的说明每一个组件并区分他们. 下面从功能的角度上详细的分析一下connector ...

  6. thymeleaf之下拉框回显选中

    #1.select下拉框取值    <div class="form-group ">        <label id="resource" ...

  7. 1076 Wifi密码

    下面是微博上流传的一张照片:“各位亲爱的同学们,鉴于大家有时需要使用 wifi,又怕耽误亲们的学习,现将 wifi 密码设置为下列数学题答案:A-1:B-2:C-3:D-4:请同学们自己作答,每两日一 ...

  8. tf.trainable_variables() and tf.all_variables()

    tf.trainable_variables()  返回的是 所有需要训练的变量列表 tf.all_variables() 返回的是 所有变量的列表 v = tf.Variable(0, name=' ...

  9. Linux下Ganglia集群监控安装、配置笔记

    http://www.blogjava.net/henry14/archive/2011/12/17/ganglia.html 枪声依旧 Linux下Ganglia集群监控安装.配置笔记 Gangli ...

  10. java学习笔记27(File类)

    File类: 定义:文件和目录径的抽象表示形式, Java中将路径或者文件封装成File对象 1.File类的静态成员变量 package com.zs.Demo2; import java.io.F ...