昨天写了一个引导界面， 发现界面中的IE67存在一个问题， 在某些情况下，  A锚链接如果设置了宽高，而且position:absolute的情况下， A标签的宽高无效， 至于总体的效果， 因为这个A标签受到父级的影响， 单独写DEMO的话，这个bug一直无法复现出来， 不知道是什么原因：

　　实际上出现的问题如下图，其中两个A标签宽度是整个页面的50%， 两个A标签都有position：absolute， width：50%；height：100%；  只有A标签有background的情况下， 这个A标签的宽高才生效， 否则你怎么弄， 这个标签width和高都为0， 仿佛不存在界面中：

　　　　　　

　　因为元素的文档流是定位， 没有别的元素影响到A标签，  旁边也没有浮动的元素， 所以排除float元素和position元素并排一起出现的bug ， 参考： position:absolute在IE6中不显示

　　写了一个大概的DEMO，无法复现这个问题， IE7的心我猜不了：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body style="ZOOM: 1">

<style>

    .wraper{

        position: absolute;

        left:100px;

        top:10px;

    }

    .wraper a {

        position: absolute;

        top: ;

        left: ;

        width: 100px;

        height:100px;

        z-index:;

        cursor: pointer;

    }

    .wraper .bg {

        background: #f00;

        top: 200px;

        left: ;

    }

</style>

<div>

    <div class="wraper">

        <a  href="#">

            链接

        </a>

        <a  href="#" class="bg">

            链接

        </a>

    </div>

</div>

</body>

</html>

最后得出了结论：

　　在某些情况下，如果A标签定义了宽度和高度且使用了absolute，则在IE6和IE7中点击无效。

也找到了两种解决方法：

　　1、给a标签添加样式：

background:url(about:blank);

　　2、给a标签随便添加背景色或者背景图片，然后将a标签的透明度设置为0，不过在IE中需要使用滤镜，即

opacity:;filter:alpha(opacity=);

写在最后面：

　　我把A标签换成了DIV标签， 同样存在这个问题， 解决方法同上；

IE6和IE7中<a>标签宽高设置无效的问题的更多相关文章

  1. IE7中a标签包含img,点击img,链接失效的bug

    在做列表时,我们经常会这样写: <ul class="works-list"> <li> <a href=""> <d ...

  2. 从H264码流中获取视频宽高 (SPS帧) 升级篇

    之前写过 <从H264码流中获取视频宽高 (SPS帧)> . 但发现很多局限性,而且有时解出来是错误的. 所以重新去研究了. 用了 官方提供的代码库来解析. 花了点时间,从代码库里单独把解 ...

  3. 在IE6、IE7中实现块元素的inline-block效果

    在IE6.IE7中实现块元素的inline-block效果有以下两种方法: 1先使用display:inline-block属性触发layout,然后再定义display:inline让块元素呈现内联 ...

  4. JavaScript中的各种宽高以及位置总结

    JavaScript中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动 ...

  5. LODOP中的各种宽高和位置简短问答

    LODOP中的位置边距,可查看本博客另一篇相关博文:LODOOP中的各种边距 打印项.整体偏移.可打区域.内部边距关于LODOP中的各种宽高,可查看本博文简短问答下方的正文:.该文其实有两个以前的相关 ...

  6. Qt TabWidget QTabBar 宽高设置

    /*************************************************************************** * Qt TabWidget QTabBar ...

  7. JavaScript中的各种宽高属性

    转自慕课网:http://www.imooc.com/article/14516   在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight.offsetHeight.scroll ...

  8. JavaScript及jQuery中的各种宽高属性图解

    文/poetries(简书作者)原文链接:http://www.jianshu.com/p/60332df38393 著作权归作者所有,转载请联系作者获得授权, 并标注“简书作者”.   作者声明:本 ...

  9. JavaScript中的各种宽高总结

    window和document首先我们来高清两个概念:    window和document的区别是什么?    window.location和document.location是一样吗?第一个问题 ...

随机推荐

  1. URL和URI的区别和联系

         URI:Universal Resource Identifier,通用资源标识符:   URL:Uniform Resource Locator,统一资源定位符:       其中,URL ...

  2. java 28 - 4 JDK5的新特性 之 枚举的概述和自定义枚举类

    枚举 枚举概述 是指将变量的值一一列出来,变量的值只限于列举出来的值的范围内.举例:一周只有7天,一年只有12个月等. 回想单例设计模式:单例类是一个类只有一个实例 那么多例类就是一个类有多个实例,但 ...

  3. h5中websocket

    ajax的数据传输是单向的,客户端和服务端没有连接-----客户端建立连接发送请求----服务器端沿着建立的连接返回相应----断开连接 websocket则是可以在客户端和服务器端进行双向的数据接收 ...

  4. php进阶函数

    1,对文件的操作,确保多个进程可以同时读写一个文件(flock函数) flock($hamdle,int $operator) operator的取值,LOCK_SH(共享锁定,读取程序),LOCK_ ...

  5. Java数据类型和变量

    Java中存在2种数据类型,下面我们来详解一下: 基本数据类型: 引用数据类型: 可以用一张表来记录: 基本数据类型 整型 byte:1个字节8位,取值范围为:[-128, 127],直接写值:(by ...

  6. 【转】Sql Server参数化查询之where in和like实现详解

    转载至:http://www.cnblogs.com/lzrabbit/archive/2012/04/22/2465313.html 文章导读 拼SQL实现where in查询 使用CHARINDE ...

  7. 洛谷 1016 / codevs 1046 旅行家的预算

    https://www.luogu.org/problem/show?pid=1016 http://codevs.cn/problem/1046/ 题目描述 Description 一个旅行家想驾驶 ...

  8. python 播放 wav 文件

    未使用其他库, 只是使用 pywin32 调用系统底层 API 播放 wav 文件. # Our raison d'etre - playing sounds import pywintypes im ...

  9. Burndown chart

    S型的燃尽图 在一次milestone开发过程中,开发者会持续编辑issue列表,每个issue都有自己的生命周期.燃尽图预期这些issues会被线性的消灭掉,所以从第一天直接到最后一天画个直线表示预 ...

  10. Spring MVC 急速集成 Shiro 实录

    相信有很多的程序员,不愿意进行用户管理这块代码实现. 原因之一,不同的JavaEE 系统,用户管理都会有个性化的实现,逻辑很繁琐. 而且是系统门面,以后背锅的几率非常大,可谓是低收益高风险. 最近在系 ...