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

随机推荐

java Literals
Primitive Data Types The Java programming language is statically-typed, which means that all variabl ...
SDUST 作业10 Problem I 液晶显示
Description 你的朋友刚买了一台新电脑,他以前用过的最强大的计算工具是一台袖珍计算器.现在,看着自己的新电脑,他有点失望,因为他更喜欢计算器上的LC显示器.所以,你决定写一个LC显示风格的程 ...
php文件hash算法，秒传原理
header('Content-type:text/html;Charset=UTF-8'); define('blockSize', 4*1024*1024); var_dump(fileHash( ...
DELPHI 使用dbexpress控件连接MySQL数据库方法
1. 在窗体上放置4个控件: SQLConnection1,SimpleDataSet1,DataSource1,DBGrid (注意: 如果出现"Operation not allowe ...
SRF之数据访问
数据访问组件实现实体类和数据表映射.SQL语句配置执行.动态sql语句等功能,ORM方式能实现简单的对象和表的映射(配置类似hibernate),但比较单一(不支持一对多.多对多的情况),下边不做介绍 ...
gem
bundle gem xxxrake build gem push pkg/xxx.gem rake releaserake install
SQL Server 一些关键字详解(二)
1.LEFT JOIN 容易让人误解的地方背景:因为在网上搜了下 LEFT JOIN 和 OUTER APPLY 的区别,时发现,有的网友解释为: 1) A left join B 的连接 ...
Visual Studio 2013中添加mimeType
事例: cd C:\Program files\IIS Expressappcmd set config /section:staticContent /+[fileExtension='.json' ...
EXCLE图形插入实例
根据所给名称找到相应图片,并进行导入. 代码如下: Sub Import_picture() For Each shap In Sheet1.Shapes '在sheet1中的图片对象进行循环 If ...
AsyncTask和Handler两种异步方式的实现和区别比较
1 AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可以 ...

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

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

随机推荐

热门专题