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

时间：2022-09-11 08:37:20

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

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

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

　　因为元素的文档流是定位， 没有别的元素影响到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标签， 同样存在这个问题， 解决方法同上；

相关文章