IE6和IE7中a標簽寬高設置無效的問題 - diligenceday－IT工程師數位筆記本

文章出處

昨天寫了一個引導界面，發現界面中的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>