您的位置：首页 > 其它

IE6和IE7中<a>标签宽高设置无效的问题

2015-09-02 13:30 141 查看

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

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

　　　　　　

<!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>

View Code

最后得出了结论：

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

也找到了两种解决方法：

　　1、给a标签添加样式：

background:url(about:blank);

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

opacity:0;filter:alpha(opacity=0);

写在最后面：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航