昨天写了一个引导界面, 发现界面中的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: 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

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-19
  • 2022-12-23
  • 2021-08-29
  • 2021-05-26
  • 2021-10-05
猜你喜欢
  • 2021-08-18
  • 2022-02-17
  • 2021-10-17
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案