百分比布局实现响应式布局在 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端和移动端所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型特点: 响应式布局是不需要单独写移动端页面的 ...

随机推荐

C#反射动态调用dll中的方法
//加载程序集(dll文件地址),使用Assembly类 Assembly assembly = Assembly.LoadFile(AppDomain.CurrentDomain.BaseDirec ...
C#winform初试报表
步骤1.新建一个窗口,拖一个ReportViewer控件上去,设置该控件的Dock为Fill. 步骤2.添加一个报表文件,如:Report1.rdlc,设置其中的参数,这里设置的参数和下面的代码里面的 ...
Java通过Executors提供四种线程池
http://cuisuqiang.iteye.com/blog/2019372 Java通过Executors提供四种线程池,分别为:newCachedThreadPool创建一个可缓存线程池,如果 ...
c#生成随机数示例分享
c#生成(随机数 http://www.jbxue.com/tags/suijishu.html)的代码. /// 构造随机数种子 ]; System.Security.Cr ...
linux资源监控命令详解
Linux统计/监控工具SAR详细介绍:要判断一个系统瓶颈问题,有时需要几个 sar 命令选项结合起来使用,例如: 怀疑CPU存在瓶颈,可用 sar -u 和 sar -q deng 等来查看怀疑内 ...
第六章Linux的文件权限与目录配置
一.Linux用户分类 1.Linux用户分为:(文件|目录)所有者(OWN),(同组内的)用户组,其他人; 2.一个天神:root;,几乎能完成任何事.... 二.目录权限的意义目录的权限和文件的 ...
2.python的变量与赋值
首先,为何要使用变量这里就不再多说了,我这里就介绍一下变量的命令规则和变量赋值的内存行为. 1.变量的命名规则变量其实通过一个标记调用内存中的值,而变量名就是这个标记的名称,但是万一这个标记已经被提 ...
深入理解Java String#intern() 内存模型
原文出处: codelog.me 大家知道,Java中string.intern()方法调用会先去字符串常量池中查找相应的字符串,如果字符串不存在,就会在字符串常量池中创建该字符串然后再返回. 字符串 ...
activiti
http://activiti.org/designer/archived/ eclipse plugin
Unity Scripting Tutorials 要点记录
(搬运自我在SegmentFault的博客) 这几天通过Unity官网的Unity Scripting Tutorials的视频学习Unity脚本,观看的过程中做了记录.现在,整理了一下笔记,供自己以 ...

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

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

随机推荐

热门专题