css 适配ie6,ie7,ff的fixed,元素左右端固定不动精准定

2021-03-14 00:27 jianzhan
实际效果

提醒:您能够先改动一部分编码再运作

以便适配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⑴:document.body.scrollTop+document.body.clientHeight-this.clientHeight⑴));
}
</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>