繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
- CSS样式表
- 正确地利用css改进网站设计的3个技巧
- CSS网页设计 把HTML标记分类
- 几个Reset CSS的八卦问题
- css 网页虚线制作方法剖析
- 网页制作小技巧 dl dt dd标签用法
- 玩转CSS3色彩
- RGBa色彩的浏览器支持分析
- WEB标准心得之网页重构的思路
- 学习web标准的十个重要理由总结
- CSS 星级评价效果代码
- ie6 fixed bug的解决方法 (css+js)
- html pre标签使文本自动换行
- CSS word-wrap同word-break的区别
- css 入门基础教程
- IE7或者IE8全屏解决方案
- JavaScript CSS Style属性对照表
- 优秀设计和卓越设计之间的细微区别
- CSS教程:容易忽略的但是很熟悉的CSS属性
- 通过语义化的标签减少DIV简化网页代码
- html和css实现数据图表的展示效果
CSS样式表 中的 css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 129 ::
收藏到网摘: 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
