昨天写了一个引导界面, 发现界面中的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. 正弦 sin 余弦 cos

    正弦 以下概念需掌握 直角,锐角 sinA = 对边 / 斜边 性質 奇偶性 奇 定義域 (-∞,∞) 到達域 [-1,1] 周期 2π 在數學中,正弦是一種週期函數,是三角函数的一種.它的定义域是整 ...

  2. [No000025]停止自嘲—IT 技术人必须思考的 15 个问题

    行内的人自嘲是程序猿.屌丝和码农,行外的人也经常拿IT人调侃,那么究竟是IT人没有价值,还是没有仔细思考过自身的价值? 1.搞 IT 的是屌丝.码农.程序猿? 人们提到IT人的时候,总会想到他们呆板. ...

  3. PPT文档页数显示的增加和更新

    在PPT的右下角增加页数的显示能够帮助演讲者把握进度,所以会经常遇到需要把页数显示在右下角的情况,这次在制作ppt的时候也遇到了.因此在这里总结一下设置方法. 一.在右下角显示当前页数和总页数 1)获 ...

  4. javascript里面foreach遍历函数介绍,以及跟jquery里面each的区别

    foreach是把数组从头到尾遍历一遍,有三个参数分别是:数组元素,数组索引,数组本身.如果是一个参数,就是数组元素. var data=[1,2,3,4,5,6]; var sum=0; data. ...

  5. nodejs里的module.exports和exports的关系

    关于node里面的module.exports和exports的异同,网上已经有很多的资料,很多的文章,很多的博客,看了很多,好像懂了,又好像不懂,过几天又不懂了...大致总结是这样的: //下面这种 ...

  6. JSTL中的TLD配置和使用。

    一,JSTL介绍: JSTL标签库,是日常开发经常使用的,也是众多标签中性能最好的.把常用的内容,放在这里备份一份,随用随查.尽量做到不用查,就可以随手就可以写出来.这算是Java程序员的基本功吧,一 ...

  7. AAL template: ROI to brain lobe

    Reference: Altmann A, Schröter M S, Spoormaker V I, et al. Validation of non-REM sleep stage decodin ...

  8. Standard Error of Mean(s.e.m.)

    · 来源:http://www.dxy.cn/bbs/thread/6492633#6492633 6楼: “据我所知,SD( standard deviation )反应的是观测值的变异性,其表示平 ...

  9. python处理经过gzip压缩的网页内容

    Python在进行网页抓取时,有时会获取到经过gzip压缩后的数据(体积小,传输快),导致无法阅读和使用. 如图所示,为http原始报文.可以看到,header区域的“Content-Encoding ...

  10. mysql新建用户的方法

    新增 insert into mysql.user(Host,User,Password,ssl_cipher,x509_issuer,x509_subject) values("local ...