常用能兼容IE7的页面布局汇总

最新推荐文章于 2024-05-15 16:35:17 发布
最新推荐文章于 2024-05-15 16:35:17 发布
阅读量206 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/crizy/p/6068181.html
版权

一.兼容到IE7，头部脚部固定，内容区自适应撑开

 

<!DOCTYPE html>
<html>

 

<head>
<meta charset="UTF-8">
<title></title>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%
}

.container {
min-height: 100%;
height: auto !important;
height: 100%;
/*ie6不识别min-height,如上述处理*/
position: relative;
}

.header {
background: #ff0;
padding: 10px;
}

.page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;
/*padding等于footer的高度*/
}

.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
/*footer的高度*/
background: #6cf;
clear: both;
}

.left {
width: 220px;
height: 800px;
float: left;
margin-right: 20px;
background: lime;
}

.content {
background: orange;
width: 480px;
float: left;
margin-right: 20px;
}

.right {
width: 220px;
float: right;
background: green;
}

.clearfix:after,
.clearfix:before {
content: "";
display: table
}

.clearfix:after {
clear: both;
overflow: hidden
}

.clearfix {
zoom: 1;
}
</style>
</head>

 

<body>
<div class="container">
<div class="header">这是头部</div>
<div class="page clearfix">
<div class="left">left sidebar</div>
<div class="content">main content</div>
<div class="right">right sudebar</div>
</div>
<div class="footer">footer section</div>
</div>
</body>

 

</html>

 

二.经典布局，兼容到IE7头部脚部固定，内容区超出滚动条

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>头尾固定的自适应内容布局</title>
<style type="text/css">
<!--
* { margin:0; padding:0; }
html, body { height:100%; width:100%; overflow:hidden }
.wrap { background:#FF8C00; width:100%; overflow-y:scroll; height:100%; position:absolute; top:0; z-index:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; border-top:100px solid #fff; border-bottom:100px solid #fff; }
.top { height:100px; width:100%; background:#6B8E23; position:absolute; top:0; left:0; z-index:100; }
.footer { height:100px; width:100%; background: #EE4063; position: absolute; bottom:0; left:0; z-index:100 }
-->
</style>
</head>
<body>
<div class="top">
固定头部100px;
</div>
<div class="wrap">
中间自适应部分<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="footer">
固定尾部100px
</div>
</body>
</html>

 

三.兼容到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" />
<title>上面固定下面自适应</title>
<style type="text/css">
html
{
margin:0;
overflow:hidden;
_padding:61px 0px 0px 0;
_border:0;
}
body
{
margin:0;
height:100%;
}
#content
{
margin:0; /*公共*/
width:100%;
position:fixed;/*FF IE7 SF*/
top:61px;
bottom:0px;
overflow: auto !important;
_position: relative;/**IE6***/
_top:0px;
_OVERFLOW-Y: auto;
_OVERFLOW-X: auto;
SCROLLBAR-FACE-COLOR: #EEEEEE;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #919192;
SCROLLBAR-3DLIGHT-COLOR:#ffffff;
SCROLLBAR-ARROW-COLOR: #919192;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
_height:100%;
}
#header {
position:absolute;/*公共*/
top:0;
left:0;
width:100%;
height:60px;
border-bottom:solid 1px #AE85E1;
background-color:#EFEFEF;
overflow:auto !important;/*FF*/
_OVERFLOW-Y: auto;/*IE6*/
_OVERFLOW-X: auto;
SCROLLBAR-FACE-COLOR: #EEEEEE;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #919192;
SCROLLBAR-3DLIGHT-COLOR:#ffffff;
SCROLLBAR-ARROW-COLOR: #919192;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
}
</style>
</head>
<body>
<div id="header">上部固定部分</div>
<div id="content">
<p>中部自适用部分</p>
<p>设定宽度为1000px的线</p>
<hr width="1000px" />
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>
<p>中部自适用部分</p>　
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/crizy/p/6068181.html

a633125
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IE6兼容性问题及IE6常见bug详细汇总
09-25
在前端开发过程中，IE6浏览器的兼容性问题一直困扰着开发者。由于其独特的解析机制和对CSS、HTML标准的支持不足，导致了许多常见的显示异常。以下是一些关于IE6兼容性和bug的详细解释及其解决方案： 1. **IE6怪异...
bug总结-ie7下两列布局，右侧不能设置width100%
fanhaiwang520的专栏
05-22 1558
以上代码发现在ie7下边右侧div会跑到下边去，原因就是右侧div设置了width：100%，将width：100%去掉即可；
水印兼容ie7，解决水印覆盖控件问题，解决ie7的pointer-events: none无效问题
最新发布
qq_44883447的博客
05-15 267
解决因pointer-events: none无效从而出现的覆盖问题的方案是：先隐藏忽略水印容器，根据点击事件拿到点击位置，找到相同位置下的元素，并主动触发该元素的点击事件，最后重新显示水印容器。
win11 打开 IE7 兼容模式
沧夜的成长日记
09-04 1万+
win11 打开 IE7 兼容模式 1.打开edge浏览器，在地址栏输入 edge://settings/defaultBrowser 进入默认浏览器设置界面 2.将设置改成： 让 Internet Explorer 在 Microsoft Edge 中打开网站 改为 仅不兼容的网站(推荐) 允许在 Internet Explorer 模式下重新加载网站 改为 允许 Internet Explorer 模式页面 点击添加 将需要用ie打开的网址添加进去 3.Win + R 输入 gpedit.msc
ie7,8兼容大全，不定期更新中...
mollerlala的博客
05-09 425
啦啦啦，都是我工作中遇到的问题，所以把解决方法整理一下，都是网上搜的，嘻嘻嘻。 1.轮播：swiper2支持ie7,8的轮播插件，你的不二选择！ ps：当有左右控制按钮，一页展示多个slider时，向左滑动会出现上一个滑块空白的情况 ps：滚动slider要大于等于4个，我试了3个不生效 解决方法，添加centeredSlides和loopAdditionalSlides...
如何兼容低版本的IE
子玉的博客
03-14 351
要兼容低版本的IE（Internet Explorer），通常需要考虑以下几个方面：1. **CSS Hack**：在编写CSS时，可以使用一些特定的Hack技巧来针对不同版本的IE进行样式调整。比如使用`_property: value;`针对IE6、IE7，使用`*property: value;`针对IE7等。2. **条件注释**：可以通过在HTML文档头部添加条件注释来针对不同版本的IE加载特定的CSS文件或JavaScript文件。例如： 3. **JavaScript兼容性处理**：在
IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总
09-25
为了兼容IE6，我们通常需要采用其他浏览器支持的属性，并配合使用!important来确保规则能够覆盖其他浏览器的设置，例如在设置min-height的同时指定height为auto，并加上!important。 5. IE6中100%高度的父级元素...
div+css 解决ie6兼容问题总汇
05-23
本文主要汇总了使用div+css布局时如何解决IE6的常见兼容问题。 1. **条件注释**：这是针对IE6浏览器的一个特殊解决方案。通过使用条件注释，我们可以针对IE6及以下版本加载特定的CSS或JavaScript文件，以解决兼容性...
div+css布局中常用方法汇总.pdf
11-26
《div+css布局中常用方法汇总》 在网页设计中，div+css布局是一种常见的页面构建方式，它能够实现灵活的网页布局，并提高网页的可维护性和可访问性。以下是一些div+css布局中常用的技术和技巧： 1. **文本框...
CSS布局资料：IE5、IE6、IE7、IE8 的CSS HACK兼容列表.mht
05-29
CSS布局资料：IE5、IE6、IE7、IE8 的CSS HACK兼容列表
IE7.JS解决IE兼容性问题方法
07-30
NULL 博文链接：https://liuzidong.iteye.com/blog/850299
完美解决IE(IE6/IE7/IE8)不兼容HTML5
12-11
完美解决IE(IE6/IE7/IE8)不兼容HTML5
html兼容ie7ie8,解决IE6、IE7、IE8样式不兼容问题
weixin_34873798的博客
06-27 1083
这里和大家探讨一下解决IE6、IE7、IE8 DIV错位问题，如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，非常方便。IE6里DIV错位的问题采用”FLOAT：LEFT“的DIV在IE8、IE7、都没问题，IE6下却向下移动，出现空白。这是因为，IE6采用的内核默认把DIV之间的距离增加...
一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
热门推荐
jgwei的专栏
01-21 9万+
http://www.cnblogs.com/yoosou/archive/2012/07/27/2612443.html 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 2012-04-25 16:29:04| 分类： 学习 |字号 订阅 在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案
flex 兼容IE8，flex兼容IE7,通过clear both清除浮动和float 实现兼容IE的flex布局
dcxia89的博客
03-29 1万+
  写在前面：   vue 配合 element-ui 布局时，因element布局容器默认flex布局，而ie9不兼容。为了使ie9上能良好的表现弹性布局，查找到以下博客，完美解决。xi一、float 布局float使元素脱离文档流，并且父元素内的其他的行内元素或者文本都会围绕着他放置。下面我们现写一段float的布局代码，来看一下float的作用。&lt;div class="fcont"&g...
html5响应式布局，兼容ie7.8
ZuoYanDeHuangHun的专栏
08-19 2996
1：Meta标签 2，IE8或者更早的浏览器并不支持Media Query。在此引入respond.js 3，html结构 4，媒介查询-Media Queries         CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。         当视图宽度为
最近在调页面样式布局的时候发现，table布局在IE7以上的版本中支持不够好
u010685007的专栏
07-11 1091
相比之下，IE7以下的浏览器中，table布局倒是特别整齐。 由于现在普遍流行的是IE8以上的浏览器，所以建议使用DIV/CSS进行页面布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值