繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
- CSS样式表
- 简单学习CSS网页布局(初学者)
- 8个简单实用的CSS秘诀
- Webjx收集基于CSS JS设计50款优秀的导航菜单
- css word-break word-wrap 前台显示自动换行
- css 自动换行 强制换行属性 (firefox+ie)
- css 教学实例 漂亮的搜索框
- CSS 折叠的菜单实现代码
- 关于html元素的 width属性无效果的解决方法
- css 相对定位 绝对定位 浮动 分析
- css 滑动门技术的介绍及实例分享
- 负边距创建自适应宽度的流体布局的实现方法
- 有利于SEO的DIV+CSS的命名规则小结
- css盒子模型 css margin 外边框合并
- css 优先级关系
- input 文本框 文字垂直居中对齐 ie firefox
- css margin-left在IE6下的问题的解决方法
- IE8样式不正确显示问题
- div中子div在firefox ie 水平居中对齐
- css 不兼容性问题小结
- CSS 3D立方体制作
CSS样式表 中的 css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 148 ::
收藏到网摘: 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
