最近接了个政府项目，政府项目要求响应式，并且兼容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格式，完美解决

　　　　

　　　　

　　　　　

百分比布局实现响应式布局在 IE6 中填坑思路的更多相关文章

  1. html响应式布局，css响应式布局，响应式布局入门

    html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...

  2. 浅谈静态布局、流式布局，rem布局，弹性布局、响应式布局

    静态布局: 特点:没有兼容性问题 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分:移动设备:另外建立移动网站,单独 ...

  3. 自适应布局，响应式布局以及rem,em区别

    一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...

  4. Bootstrap页面布局5 - 响应式布局(格式)

    旨在优化不同上网设备中页面显示的优化 响应式布局:就是根据浏览窗口的尺寸,改变页面的变化 原理:利用css的media-queries判断浏览窗口的尺寸,在CSS样式表中设置一些规则! 例如: 在&l ...

  5. [学习笔记]viewport定义，弹性布局，响应式布局

    一,移动端宽度设置viewport视图窗口,<meta name="viewport" content="width=device-width,initial-sc ...

  6. viewport定义，弹性布局，响应式布局及LESS和SASS框架应用

    一,移动端宽度设置 viewport视图窗口,<meta name="viewport" content="width=device-width,initial-s ...

  7. 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

    静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

  8. rem布局及响应式布局

    流式布局(100%布局)(可能:做的页面不是很美观)效果与弹性布局一样 不设置宽高:表示宽 auto 最外层:保证100% 等比例缩放的算法:  320/10  已知的一个比例  =  已知的宽/x  ...

  9. 移动 WEB 开发的布局方式 ---- 响应式布局

    一.响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的 ...

随机推荐

  1. CentOS学习笔记--时间

    时间 有装过Linux系统的人,可能都会有这样的经历,就是该机器安装windows系统时,时间正确,但是安装了linux系统后,尽管时区选择正确,也会发现系统时间不对.这是由于安装系统时采用了UTC, ...

  2. Tomcat启动过程（一）：从BootStrap到EndPonit

    Tomcat版本tomcat6.0.44观察catalina.sh文件,启动入口:org.apache.catalina.startup.Bootstrap,该类main方法执行下面三个方法----- ...

  3. Javascript 命名空间模式

    命名空间是通过为项目或库创建一个全局对象,然后将所有功能添加到该全局变量中.通过减少程序中全局变量的数量,实现单全局变量,从而在具有大量函数.对象和其他变量的情况下不会造成全局污染,同时也避免了命名冲 ...

  4. C#获取本周周一的日期

    /// <summary> /// 获取本周的周一日期 /// </summary> /// <returns></returns> public st ...

  5. Ajax+Asp.Net无刷新分页

    1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Gener ...

  6. c#自定义控件属性面板及选择资源设置

    博客转移到 http://jacean.github.io/ 继续分享编程经验 因为要做流体布局,但两个控件没办法组合,就做自定义控件.这个控件需要一个text设置文本,一个pic设置图片显示,图片通 ...

  7. c语言学习第四天数据类型1

    int   代表整数,它在内存中占4个字节,二进制的表示方式是占用了三十二位,二进制中只包含0和1,那它的最大值就是全为1,但int是 有符号类型,所以最高位(左边的第一位)要拿出来做符号位,这样就只 ...

  8. PHP常用函数和常见疑难问题解答

    PHP常用库函数介绍 一.PHP字符串操作常用函数 1.确定字符串长度  int strlen(string str) 2.比较两个字符串 a. strcmp函数对两个字符串进行二进制安全的比较,并区 ...

  9. php小算法总结一(数组重排,进制转换)

    1.两个有序数组组合成一个新的有序数组 <?php $arr1=array(2,5,7,9,12); $arr2=array(3,4,6,8,10,11); function merge_sor ...

  10. 用开源中国(oschina)Git管理代码（整合IntelliJ 13.1.5）

    简介 开源中国提供了Git服务(地址:http://git.oschina.net/),在速度上比国外的github要快很多.使用了一段时间,感觉很不错.oschina git提供了演示平台,可以运行 ...