IE6模拟position:fixed效果
不会抖动,但是使用了expression,很糟糕。
纯保存。
源代码:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta name="keywords" content="关键字" />
<meta name="description" content="页面简介" />
<meta name="generator" content="程序" />
<meta name="author" content="作者[ReKey]" />
<meta name="copyright" content="版权所有[ReKey]" />
<meta name="MSSmartTagsPreventParsing" content="True" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:0;padding:5px 0 30px}
.test{border:1px solid #ccc;line-height:100px;margin:0 5px 5px;}
.fixed{position:fixed;bottom:0;left:15px;right:15px;height:30px;line-height:30px;background:#ccc;}
#iefixed{zoom:1;margin:-1px 15px 0;height:1px;overflow:hidden;}
</style>
<!--[if lt IE 7]>
<script type="text/javascript">
function _fixBackground(){
var body = document.body;
var BLANK_GIF;
if (body.currentStyle.backgroundAttachment != "fixed") {
if (body.currentStyle.backgroundImage == "none") {
body.runtimeStyle.backgroundImage = "url("+BLANK_GIF+")"; // dummy
body.runtimeStyle.backgroundAttachment = "fixed";
}
}
}
window.onload = function(){
_fixBackground();
}
</script>
<style type="text/css">
.fixed{position: absolute;
bottom:0;
clear: both;
width:expression(document.getElementById('iefixed').clientWidth);
left:expression(document.getElementById('iefixed').offsetLeft);
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight)
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight));}
</style>
< ![endif]-->
</head>
<body>
<!--[if lt IE 7]><div id="iefixed"></div>< ![endif]-->
<div class="test">增加高度的</div>
<div class="test">增加高度的</div>
<div class="test">增加高度的</div>
<div class="test">增加高度的</div>
<div class="test">增加高度的</div>
<div class="test">增加高度的</div>
<div class="test">增加高度的</div>
<div class="test">增加高度的</div>
<div class="test">增加高度的</div>
<div class="test">增加高度的</div>
<div class="test">增加高度的</div>
<div class="test">增加高度的</div>
<div class="test">增加高度的</div>
<div class="fixed">这里是position:fixed部分.</div>
</body>
</html>