繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
- CSS样式表
- 关于CSS控制DIV水平居中问题
- CSS:相同元素不同结构重复定义的问题
- 关于DIV CSS和XHTML CSS的理解
- CSS教程：简单理解em
- CSS教程:导致一些问题的overflow
- CSS常用属性的代码简化实例
- CSS教程：总结清除浮动的方法
- 网页设计中典型的header代码结构
- CSS初学者常犯错误汇总
- CSS网页布局：div水平居中的各种方法
- CSS Div网页布局中的结构与表现
- CSS教程：简化CSS中属性的示例
- CSS网页布局：div垂直居中的各种方法
- acronym标记和abbr标记的不同之处
- CSS编写的网页打开流畅相关知识与注意点
- 你知道CSS中长度单位pt、px、dpi的意思吗？
- CSS页面布局中HTML结构化
- CSS选择器的使用技巧
- CSS教程：网页图片垂直居中的使用技巧
- dl,dt,dd标记在网页中要充分利用
CSS样式表 中的 css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 125 ::
收藏到网摘: n/a
效果
提示：您可以先修改部分代码再运行
为了兼容ie6(万恶的东西),用的是expression的方法
在页头加入：
复制代码
代码如下:<style type="text/css">
body{
background-image:url(about:blank); background-attachment:fixed;/*必要，防抖动*/
}
.head,.foot{
position:fixed !important;/*ie7 ff*/
position:absolute;
z-index:21;
background:#999;
height:30px;
width:500px;
}
.foot{
bottom:0 !important;/*ie7 ff*/
}
.main{
height:2000px;
}
</style>
<!--[if IE 6]>
<style type="text/css">
/*ie6 fix顶端元素*/
.head{
top:expression(eval(document.documentElement.scrollTop));
}
/*ie6 fix底端元素*/
.foot{
top: expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop+document.body.clientHeight-this.clientHeight-1));
}
</style>
<![endif]-->
HTML:
复制代码
代码如下:<body>
<div class="head">
header
</div>
<div class="main">
<p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p>
</div>
<div class="foot">
foot
</div>
</body>
评论 (0) All
