百分比布局实现响应式布局在 IE6 中填坑思路

　　最近接了个政府项目，政府项目要求响应式，并且兼容IE6，不想用媒体监测的方法，于是用了百分比布局的方法，但是IE6真是名不虚传，做第一个界面就遇到了个bug

　　①两张宽度各占50%的图片无法在同一横排，只显示左面的那张图片，于是我加了float:left ，不对，去掉图片的border，也不行，于是就用了一招障眼法，两张图片都是49.5%，完美解决，并且这一点偏差根本看看不出来

　　②百分比布局菜单位置，左右可以按照百分比，但是高度和上下距离无法确定，于是用js获取图片的高度，然后用比例将菜单的上下距离设置好，但是在屏幕尺寸发生变化之后，菜单位置发生偏移，我用了window.onresize检测屏幕尺寸，代码如下

　　　　代码如下：

<!DOCTYPE html>
<html>
<head>
<title>菜单定位</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
*{margin: 0;padding: 0;border: 0}
body{height:  100%;overflow-x: hidden;overflow: hidden}
.center img{float: left;}
.door{width: 100%;height:100%;margin: 0 auto;overflow: hidden;position: absolute;z-index: 500;}
.pp{float: left;width:49.95% !important;width:49.95%;height:100%;position: relative;display:inline; border: 0}
.pp img{width:100%;height:100%;}
.pp img{position: absolute;left: 0}
img{width: 100%;display: block;position: absolute;left: 0;height: 100%}
.box{width: 100%;height: 100%;overflow: hidden;}
a{display: block;position: absolute;z-index:400;text-decoration:none;outline:0;cursor: pointer;width:100%;height:100%;text-align: center;overflow: hidden;}
#door{cursor:pointer}

.mine{width: 11%;height:55%;top:55%;left
    : 7%;font-size:300px}
.jap{width: 7%;height:55%;top:55%;left
    : 22%;font-size:240px}
.land{width: 5%;height:55%;top:55%;left: 32.5%;font-size:240px;line-height:200px;font-size:200px;}
.imp{width: 5%;height:55%;top:55%;left
    : 62.2%;font-size:240px;}
.base{width: 7%;height:55%;top:55%;left
    : 71.5%;font-size:300px;}
.his{width: 11%;height:60%;top: 45%;left
    : 82.2%;font-size:400px;}
#end{width: 6%;height: 40%;left: 47%;font-size: 400px;}
.center{width: 100%;margin: 0 auto;height: 100%;overflow: hidden; }
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
    window.onload=function(){
        var oBox1 = document.getElementById('box1');
        var oBox2 = document.getElementById('box2');
        var aImg = document.getElementsByTagName('img');
        
        var sb = document.getElementById('sb');
        var sb1 = document.getElementById('sb1');

        var oMine = document.getElementById('mine');
        var oJap = document.getElementById('jap');
        var oLand = document.getElementById('land');
        var oEnd = document.getElementById('end');    
        var oImp= document.getElementById('imp');
        var oBase=document.getElementById('base');
        var oHis= document.getElementById('his');
    
        var l = document.body.clientWidth/2;


        oMine.style.top = sb1.offsetHeight/3+'px';
        oMine.style.height = sb1.offsetHeight/2+'px';

        oJap.style.top = sb1.offsetHeight/3+'px';
        oJap.style.height = sb1.offsetHeight/2+'px';

        oLand.style.top = sb1.offsetHeight/2.4+'px';
        oLand.style.height = sb1.offsetHeight/3+'px';

        oEnd.style.top = sb1.offsetHeight/2.3+'px';
        oEnd.style.height = sb1.offsetHeight/5+'px';


        oImp.style.top = sb1.offsetHeight/2.4+'px';
        oImp.style.height = sb1.offsetHeight/3+'px';

        oBase.style.top = sb1.offsetHeight/3+'px';
        oBase.style.height = sb1.offsetHeight/2+'px';

        oHis.style.top = sb1.offsetHeight/3+'px';
        oHis.style.height = sb1.offsetHeight/2+'px';

        window.onresize=function(){
            
            var l = document.body.clientWidth/2;



            oMine.style.top = sb1.offsetHeight/3+'px';
            oMine.style.height = sb1.offsetHeight/2+'px';

            oJap.style.top = sb1.offsetHeight/3+'px';
            oJap.style.height = sb1.offsetHeight/2+'px';

            oLand.style.top = sb1.offsetHeight/2.2+'px';
            oLand.style.height = sb1.offsetHeight/3+'px';


            oEnd.style.top = sb1.offsetHeight/2.3+'px';
            oEnd.style.height = sb1.offsetHeight/5+'px';


            oImp.style.top = sb1.offsetHeight/3+'px';
            oImp.style.height = sb1.offsetHeight/2+'px';

            oBase.style.top = sb1.offsetHeight/3+'px';
            oBase.style.height = sb1.offsetHeight/2+'px';

            oHis.style.top = sb1.offsetHeight/3+'px';
            oHis.style.height = sb1.offsetHeight/2+'px';

        }

    }
</script>
</head>
<body>
<div class="center" id="center">

    <div class="box" id="sb">
        <img width="100%" id="sb1" src="img/door.jpg">
        <a href="mine/mine.html" id="mine" class="mine"> &nbsp</a>
        <a href="jap/jap.html" id="jap" class="jap">&nbsp</a>
        <a href="land/land.html" id="land" class="land">&nbsp</a>
        <a href="front.html" id="end" class="end">&nbsp</a>
        <a href="imp/imp.html" id="imp" class="imp">&nbsp</a>
        <a href="base/base.html" id="base" class="base">&nbsp</a>
        <a href="his/his.html" id="his" class="his">&nbsp</a>
    </div>
</div>
</body>
</html>

IE6下图片无法正常显示：用PS打开图片，将颜色模式改成RGB格式，完美解决