[html]兼容 IE6 IE7 的简单网页框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<title>div仿框架布局 - iframe无法适应高度的bug也一起被修复了</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
html { height:100%; overflow:hidden; background:#fff;}
body { height:100%; overflow:hidden; background:#fff;}
div { background:#f60; line-height:1.6;}
.top { position:absolute; left:10px; top:10px; right:10px; height:50px;}
.side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;}
.main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;}
.bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}
.main iframe { width:100%; height:100%;}
/*---ie6---*/
html { *padding:70px 10px;}
.top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
.side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
.main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
.bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
</style>
</head>
<body>
<div class="top">看，亲爱的，iframe无法适应高度的bug也一起被修复了。不过这个修复也可以想想其他的办法：）办法就在本文中，有兴趣的朋友可以自己摸索。</div>
<div class="side">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="main">
<iframe frameborder="0" src="http://www.g.cn/"></iframe>
</div>
<div class="bottom"></div>
</body>
</html>
iframe
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href="http://www.14px.com" title="Home" />
<title>div仿框架布局 - 所幸IE7和IE6的html标签有着相同的盒模型</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none;}
html { height:100%; overflow:hidden; background:#fff;}
body { height:100%; overflow:hidden; background:#fff;}
div { background:#f60; line-height:1.6;}
.top { position:absolute; left:10px; top:10px; right:10px; height:50px;}
.side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;}
.main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto; font-size:14px;}
.bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;}
/*---ie6 / ie7---*/
html { *padding:70px 10px;}
.top { *height:50px; *margin-top:-60px; *margin-bottom:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
.side { *height:100%; *float:left; *width:200px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
.main { *height:100%; *margin-left:210px; _margin-left:207px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
.bottom { *height:50px; *margin-top:10px; *position:relative; *top:0; *right:0; *bottom:0; *left:0;}
</style>
</head>
<body>
<div class="top">所幸IE7和IE6的html标签有着相同的盒模型，所以可以直接将IE6 only的部分修改为IE6+IE7 only</div>
<div class="side">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="main">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>现在请换用IE7浏览器测试，缩小窗口直到出现滚动条，看，现在没有无聊的距离了吧。它被我们修了。再复述一遍这段文字才够长，不要嫌我罗嗦：现在请换用IE7浏览器测试，缩小窗口直到出现滚动条，看，现在没有无聊的距离了吧。它被我们修了。</p>
</div>
<div class="bottom"></div>
</body>
</html>
div
本文来自：http://www.websbook.com/htmlcssdiv/yDIVfiframekjbjxg_15459.html
[html]兼容 IE6 IE7 的简单网页框架的更多相关文章
- div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
- 兼容IE6/IE7/IE8/FireFox的css hack
兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...
- [转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips
使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性 ...
- 给Select赋值 innerHTML 不兼容IE6\IE7\IE8\IE9
<select class="b-select" id="location-province" name="Province" def ...
- 下拉菜单select高度（兼容IE6/IE7/IE8/火狐等主流浏览器）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome
在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome #identifier-pannel { bottom: 345px; margin-left: 512px; pos ...
- CSS兼容IE6 IE7 IE8 IE9 Firefox的总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...
- 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明
自从安装了IE8.0正式版本!木头 就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...
随机推荐
- phpstorm8.0汉化版下载
下载地址http://www.52z.com/soft/161911.html 汉化包:http://www.7down.net/soft/20586.html phpStorm汉化方法 1.安装原版 ...
- 虚拟机Ubuntu16，caffe环境搭建
虚拟机下的Ubuntu16.04+caffe+onlycup 官网的step很重要,要跟着官网,的步骤来:http://caffe.berkeleyvision.org/installation.ht ...
- 动画---图形图像与动画(三)Animation效果的XML实现
使用XML来定义Tween Animation 动画的XML文件在工程中res/anim目录,这个文件必须包含一个根元素,可以使<alpha><scale> <trans ...
- yum 部署nginx
第一步,在/etc/yum.repos.d/目录下创建一个源配置文件nginx.repo: cd /etc/yum.repos.d/ vim nginx.repo 填写如下内容: [nginx ...
- Linux刷新DNS缓存
网上查了下,发现linux刷新dns的缓存方法都是: sudo /etc/init.d/nscd restart 但是在我的机器上,发现提示命令找不到: sudo /etc/init.d/nscd: ...
- TCP/IP协议学习笔记
计算机网络基础知识复习汇总:计算机网络基础知识复习 HTTP协议的解析:剖析 HTTP 协议 一个系列的解析文章: TCP/IP详解学习笔记(1)-- 概述 TCP/IP详解学习笔记(2)-- 数据链 ...
- vbs脚本总结
1. msgbox语法:msgbox "对话框","对话框标题" 例:const hw="Hello World!" msgbox(hw) ...
- 【SSM 1】SpringMVC、Spring和Struts的区别
导读:近期做到的项目中,用到的框架师SSM(SpringMVC+Spring+Mybatis),那么在这之前用过SSH,这里主要是区分一下SpringMVC和Struts,但是由于SpringMVC和 ...
- flask一些资料
http://shulhi.com/celery-integration-with-flask/ https://jeffknupp.com/blog/2014/01/29/productionizi ...
- MVC5+EF6简单实例---以原有SQLServer数据库两表联合查询为例
有二三年没写代码了,**内的工作就是这样,容易废人!看到园子里这么多大侠朝气蓬勃的,我想也要学点东西并和大家分享,共同进步!快乐每一天,进步每一天!言归正传! 通过最近一段时间对MVC5.EF6的学习 ...