本文主要包含ie6 ie7 ie8,ie6 ie7 ie8兼容,ie6 ie7,ie6 ie7 ie8 360,ie6升级ie7等相关知识,佚名 希望在学习及工作中可以帮助到您
效果
<!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>
提示：您可以先修改部分代码再运行</div>
<!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>
提示：您可以先修改部分代码再运行</div>
为了兼容ie6(万恶的东西),用的是expression的方法
在页头加入：
</div>
您可能想查找下面的文章:
- 兼容IE6、IE7的min-width、max-width写法
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- ie6、ie7下overflow失效的有效解决方法
- 关于select标签的高度设置在ie6/ie7下兼容心得
- IE6/IE7中li底部4px空隙的Bug
- IE6、IE7、IE8、Firefox兼容性CSS HACK代码及示例
- 让IE6/IE7支持display:inline-block属性的两种方法
- 让IE6/IE7/IE8支持CSS3属性的8种方法介绍
- 如何解决IE6/IE7不识别display:inline-block属性
- 解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容