解决IE6不支持Css FIXED实现详解-百分百源码网

解决IE6不支持Css FIXED实现详解

发布时间：01/15 来源：浏览：关键词：

fixed属性在我们很多前端都非常使用fixed属性来固定位置了，但是fixed属性在ie6下不被兼容了，下面小编来给大家整理一下解决IE6不支持Css FIXED方法。

例1.

下面这个方法可以完美的实现ie6里支持fixed

代码：

代码如下

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{padding:0;margin:0;}
html,body{ _height:100%; _overflow:hidden;}
body{ _overflow:auto;}
#header,#footer{
width:100%;
position:fixed;
_position:absolute;
background:#eee;
left:0px;
}
#content{background:#ccc;padding:20px;}
#header{top:0;}
#footer{bottom:0;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content">
<p>这是内容</p>
<p>这是内容</p>
<p>这是内容</p>
<p>这是内容</p>
<p>这是内容</p>
<p>这是内容</p>
<p>这是内容</p>
<p>这是内容</p>
<p>这是内容</p>
<p><script language="javascript">
for(i=0;i<100;i++){
    document.write(i+"<br />");
}
</script></p>
<p>这是内容</p>
<p>这是内容</p>
</div>
<div id="footer">footer</div>
</body>
</html>

2.实现固定div位置了，我们让它在头部或底部

代码如下

<!DOCTYPE html>
<html>
<head>
<style>
*{padding:0;margin:0;}
#header,#footer{
width:100%;
position:fixed;
font-size:32px;
text-indent:1em;
_position:absolute;
background:#eee;
left:0px;
}
#left,#right{ width:100px; height:300px; background-color:#eee; line-height:300px; text-align:center; font-size:32px; position:fixed; _position:absolute;}
.header{ width:100%; background-color:#eee; position:fixed;}
#content{background:#f9f9f9; padding:20px; text-align:center; line-height:35px;}
#header{top:0px;}
#footer{bottombottom:0px;}
#left{ left:0px; top:200px; _margin-top:200px;}
#right{ rightright:0px; top:200px; _margin-top:200px;}
</style>
</head>
<body>

<div id="left">left</div>
<div id="right">rightright</div>
<div id="header">header</div>
<div id="content">
<p>
    <script language="javascript">
for(i=0;i<100;i++){
    document.write(i+"<br />");
}
</script>
</p>
</div>
<div id="footer">footer</div>
</body>
</html>

在HEAD里面加这这段兼容IE6的代码

代码如下

固定在头部代码

代码如下
#header,#left,#right{ position:absolute;bottombottom:auto;top:expression(eval(document.documentElement.scrollTop)); }

固定在底部代码

代码如下
#footer{ position:absolute; top: expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop+document.body.clientHeight-this.clientHeight-1)); }

打赏