WEB前端

IE6 css绝对定位不支持position:fixed的解决办法

位置:首页 > WEB前端 > css教程,2013-04-13
IE6不支持“position:fixed;”,解决这个bug的办法有两种,一种是CSS方法,另外一种是JS方法。下面先介绍CSS解决办法:html{overflow:hidden;}body{hei...

IE6不支持“position:fixed;”,解决这个bug的办法有两种,一种是CSS方法,另外一种是JS方法。

下面先介绍CSS解决办法:

html{overflow:hidden;}

body{height:100%;overflow:auto;}

固定的内容{position:absolute;}  示例中为:.fixed{position:absolute;}

<!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" />
<style type="text/css">
body{ margin:0px; padding:0px; font-size:12px; line-height:22px;}
p{ margin:0px; padding:36px;}
.fixed{ position:fixed; right:60px; top:100px; border:#666666 3px solid; background-color:#CCCCCC; padding:26px;}
</style>
<!--[if IE 6]>
<style type="text/css">
html{overflow:hidden;}
body{height:100%;overflow:auto;}
 .fixed{position:absolute;}
</style>
<![endif]-->
<title>position_fixed测试</title>
</head>

<body>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<div class="fixed">我的位置是固定的!拉动滚动条看效果。</div>
</body>
</html>

解决方法二:JavaScript

var n=100;  //top值

var obj=document.getElementById("fixed"); //position:fixed对象

window.onscroll=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}

window.onresize=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}

示例如下:

<!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" />
<style type="text/css">
body{ margin:0px; padding:0px; font-size:12px; line-height:22px;}
p{ margin:0px; padding:36px;}
.float2{ position:absolute; padding:26px; border:#999999 3px solid; background-color:#3399FF; right:200px; top:200px;}
.fixed{ position:absolute; right:60px; top:100px; border:#666666 3px solid; background-color:#CCCCCC; padding:26px;}
</style>
<script language="javascript" type="text/javascript">
window.onload=function(){
var n=100;  //top值
var obj=document.getElementById("fixed"); //position:fixed对象
window.onscroll=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}
window.onresize=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}
}
</script>
<title>position_fixed测试</title>
</head>

<body>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<div class="float2">浮动的内容2</div>
<div class="fixed" id="fixed">我的位置是固定的!拉动滚动条看效果。</div>
</body>
</html>

运行效果后发现,一切正常,唯一一点不足之处就是滚动条拉动的过程中,固定块内容会有点闪。

再附上一个固定内容在右下角的例子:

<!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" />
<style type="text/css">
body{ margin:0px; padding:0px; font-size:12px; line-height:22px;}
p{ margin:0px; padding:36px;}
.float2{ position:absolute; padding:26px; border:#999999 3px solid; background-color:#3399FF; right:200px; top:200px;}
.fixed{ position:absolute; right:0px; bottom:0px; border:#666666 3px solid; background-color:#CCCCCC; padding:26px; height:26px;}
</style>
<script language="javascript" type="text/javascript">
window.onload=function(){
var obj=document.getElementById("fixed"); //position:fixed对象
var n=document.documentElement.clientHeight-obj.offsetHeight;  //top值
window.onscroll=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}
window.onresize=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}
}
</script>
<title>position_fixed测试</title>
</head>

<body>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<p>测试内容.........</p>
<div class="float2">浮动的内容2</div>
<div class="fixed" id="fixed">我的位置是固定的!拉动滚动条看效果。</div>
</body>
</html>


TAGS: css绝对定位position:fixed

猜你喜欢

NewHot