IE6和IE7中<a>标签宽高设置无效的问题
昨天写了一个引导界面， 发现界面中的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: 0; left: 0; width: 100px; height:100px; z-index:9999; cursor: pointer; } .wraper .bg { background: #f00; top: 200px; left: 0; } </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:0;filter:alpha(opacity=0);
写在最后面：
我把A标签换成了DIV标签， 同样存在这个问题， 解决方法同上；
本文作者：方方和圆圆
本文链接：https://www.cnblogs.com/diligenceday/p/4778333.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
2014-09-02 知识点--单做备忘,基础要扎实才行