最近接了个政府项目，政府项目要求响应式，并且兼容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">  </a> <a href="jap/jap.html" id="jap" class="jap"> </a> <a href="land/land.html" id="land" class="land"> </a> <a href="front.html" id="end" class="end"> </a> <a href="imp/imp.html" id="imp" class="imp"> </a> <a href="base/base.html" id="base" class="base"> </a> <a href="his/his.html" id="his" class="his"> </a> </div> </div> </body> </html>
IE6下图片无法正常显示：用PS打开图片，将颜色模式改成RGB格式，完美解决