最近接了个政府项目，政府项目要求响应式，并且兼容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. JS正则表达式使用方法及示例

    1.定义正则表达式: a.普通方式:var reg=/表达式/附加参数 附件参数: g:代表可以进行全局匹配.i:代表不区分大小写匹配.m:代表可以进行多行匹配. 上面三个参数,可以任意组合,代表复合 ...

  2. 电商、商城类APP常用标签"hot"--第三方开源--LabelView

    LabelView是在github上一个开源的标签库.其项目主页是:https://github.com/linger1216//labelview LabelView为一个TextView,Imag ...

  3. 一个ListView中显示不同的item（分组）

    MainActivity: package com.zzw.qqgroup; import java.util.ArrayList; import java.util.HashMap; import ...

  4. Windows7下CHM电子书打开不能正常显示内容

    Author:KillerLegend Date:2014.1.28 Welcome to my blog:http://www.cnblogs.com/killerlegend/ 今日下载一个CHM ...

  5. 第十四章 调试及安全性(In .net4.5) 之 对称及非对称加密

    1. 概述 本章内容包括:对称及非对称加密算法..net中的加密类.使用哈希操作.创建和管理签名认证.代码访问权限 和 加密字符串. 2. 主要内容 2.1 使用对称和非对称加密 ① 对称加密:使用同 ...

  6. python datetime 时间日期处理小结

    python datetime 时间日期处理小结 转载请注明出处:http://hi.baidu.com/leejun_2005/blog/item/47f340f1a85b5cb3a50f5232. ...

  7. EOF 与 getchar()

    1.EOF EOF是end of file的缩写,表示"文字流"(stream)的结尾.这里的"文字流",可以是文件(file),也可以是标准输入(stdin) ...

  8. 公钥私钥 ssl/tsl的概念

    一,公钥私钥1,公钥和私钥成对出现2,公开的密钥叫公钥,只有自己知道的叫私钥3,用公钥加密的数据只有对应的私钥可以解密4,用私钥加密的数据只有对应的公钥可以解密5,如果可以用公钥解密,则必然是对应的私 ...

  9. jQuery对象与DOM对象

    jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...

  10. Linux内核学习笔记——内核内存管理方式

    一 页 内核把物理页作为内存管理的基本单位:内存管理单元(MMU)把虚拟地址转换为物理 地址,通常以页为单位进行处理.MMU以页大小为单位来管理系统中的也表. 32位系统:页大小4KB 64位系统:页 ...