百分比布局实现响应式布局在 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格式，完美解决

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

html响应式布局，css响应式布局，响应式布局入门
html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...
浅谈静态布局、流式布局，rem布局，弹性布局、响应式布局
静态布局: 特点:没有兼容性问题 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分:移动设备:另外建立移动网站,单独 ...
自适应布局，响应式布局以及rem,em区别
一.自适应和响应式先说共同点: 两者都是因为越来越多的移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...
Bootstrap页面布局5 - 响应式布局(格式)
旨在优化不同上网设备中页面显示的优化响应式布局:就是根据浏览窗口的尺寸,改变页面的变化原理:利用css的media-queries判断浏览窗口的尺寸,在CSS样式表中设置一些规则! 例如: 在&l ...
[学习笔记]viewport定义，弹性布局，响应式布局
一,移动端宽度设置viewport视图窗口,<meta name="viewport" content="width=device-width,initial-sc ...
viewport定义，弹性布局，响应式布局及LESS和SASS框架应用
一,移动端宽度设置 viewport视图窗口,<meta name="viewport" content="width=device-width,initial-s ...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
rem布局及响应式布局
流式布局(100%布局)(可能:做的页面不是很美观)效果与弹性布局一样不设置宽高:表示宽 auto 最外层:保证100% 等比例缩放的算法: 320/10 已知的一个比例 = 已知的宽/x ...
移动 WEB 开发的布局方式 ---- 响应式布局
一.响应式简介一个页面布局兼容了 PC端 ,iPad端和移动端所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型特点: 响应式布局是不需要单独写移动端页面的 ...

随机推荐

ie8以下不兼容document.getElementsByName解决方法
在IE8以认为只有文本标签才有name属性的,一些元素标签用document.getElementsByName获取不到DOM,如DIV,span等,这里做一下兼容. HTML: <div na ...
Windows 和 Linux 下禁止ping的方法
Windows 和Linux 下禁止ping的方法目的: 禁止网络上的其他主机或服务器ping自己的服务器运行环境: Windows 03.08 linux 方法: Windows 03下: ...
C#虚方法和覆写方法
Zookeeper 脑裂
转自 http://blog.csdn.net/u010185262/article/details/49910301 Zookeeper zookeeper是一个分布式应用程序的协调服务.它是一个为 ...
MYSQL的存储引擎一般只要哪些？
根据个人个人见解: MySQL的存储引擎(构成.安全.锁) Myisam:数据操作快速的一种引擎,支持全文检索.文件保存在数据库名称为目录名的目录中,有3个文件,分别是表定义文件(.frm).数据文 ...
【php学习之路】php基础语法
一.什么是php? PHP即PHP: Hypertext Preprocessor(超文本处理器),是一种服务器端脚本语言,适用于创建web站点.开源免费二.php能做什么? ...
linux下的循环命令写法
直切正题方法一:利用while do循环,举例,while true;do ls;sleep 1;done 解释,该命令为每秒执行ls查询命令,sleep 1 为每秒循环,其他命令可直接替换 ls ...
DevExpress 重编译替换强命名修改源码
本文以DevExpress 11.1.8举例必须满足几个条件 1. 必须有DXperience相应版本的全部源代码SourceCode.把全部源代码复制到X:\Program Files\DevEx ...
sizeclass
横竖9种组合,代表所有大小屏幕,在storyboard中可以把contrans与不同组合绑定,也就是说,可能横向有多一个约束,纵向就没了... 实现不同屏幕不同约束,这应该是sizeclass 的存在 ...
uva 11186 Circum Triangle<叉积>
链接: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...

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

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

随机推荐

热门专题