css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
2009-11-14 01:21
721 查看
效果
为了兼容ie6(万恶的东西),用的是expression的方法
在页头加入:
HTML:
<!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>fixed ie6</title> <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]--> </head> <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> </html>
为了兼容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>
相关文章推荐
- css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
- css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
- CSS完美兼容IE6_IE7_FF的通用方法
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
- CSS打造全兼容(IE6、IE7、FF)的下拉导航菜单
- div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- CSS兼容IE6,IE7,FF的技巧
- div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- CSS使图像等比例缩放兼容IE6、IE7、FF
- div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法
- ie6,ie7,ie8 css bug兼容解决方法
- 去除链接元素的虚线框 兼容IE7、IE6、FF
- IE6 IE7 IE8 FF浏览器的CSS兼容问题(转)
- CSS实现透明度(兼容IE6 IE7 IE8 FF CHROME,其他还未测试)
- 页面元素固定在页面底部的纯css代码(兼容IE6)
- Css背景颜色渐变,j兼容多浏览器 IE6、IE7、IE8、FF、Opera、Chorme、Safari
- IE6,IE7,FireFox,Opera,Safari兼容CSS的解决方法及CSS差别
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题