今天小编跟大家讲解下有关css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法 的相关资料，希望小伙伴们看了有所帮助。
效果<!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;position:absolute;z-index:21;background:#999;height:30px;width:500px;}.foot{bottom:0 !important;}.main{height:2000px;}</style><!--[if IE 6]><style type="text/css">.head{top:expression(eval(document.documentElement.scrollTop));}.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; position:absolute; z-index:21; background:#999; height:30px; width:500px; } .foot{ bottom:0 !important; } .main{ height:2000px; } </style> <!--[if IE 6]> <style type="text/css"> .head{ top:expression(eval(document.documentElement.scrollTop)); } .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>
来源：爱蒂网
