IE6 fixed的完美解决方案
IE6 fixed的完美解决方案
发布时间:2016-12-30 来源:查字典编辑
摘要:第一种方法:纯CSS目前网上有的比较多的是这种解决方案(纯CSS):复制代码代码如下:html{overflow:hidden;}body{...

第一种方法:纯CSS

目前网上有的比较多的是这种解决方案(纯CSS):

复制代码 代码如下:

html{overflow:hidden;}

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

#rightform form{position:absolute;right:30px;top50px;}

这个方法有一个bug未解决:在IE6下会把所有position:absolute都变成“浮动”的元素;还有使用js方法滚动滚动条时会出现对象闪烁,如下方法结合了CSS和js的办法,解决了以上的问题。

复制代码 代码如下:

<!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=gb2312" />

<title>IE6 fixed</title>

<style type="text/css">

*

{

margin: 0px;

padding: 0px;

}

body {

_background-image: url(about:blank); /*用浏览器空白页面作为背景*/

_background-attachment: fixed; /* prevent screen flash in IE6 确保滚动条滚动时,元素不闪动*/

}

#topNav {

width: 980px;

z-index: 100; /*设置浮动层次*/

overflow: visible;

position: fixed;

top: 50px; /* 其他浏览器下定位,在这里可设置坐标*/

_position: absolute; /*IE6 用absolute模拟fixed*/

_top: expression(documentElement.scrollTop + 50 + "px"); /*IE6 动态设置top位置*/

/* documentElement.scrollTop 设置浮动元素始终在浏览器最顶,可以加一个数值达到排版效果 */

background-color:#0000FF;

height: 31px;

}

.show{

position:absolute;

top:500px;

left:400px;

border:#ff0000 1px solid;

}

</style>

</head>

<body>

<div id="topNav">1111</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<br /><br /><br /><br /><br /><br /><br /><br /><br />

<div>show</div>

</body>

</html>

只实现了垂直方向的fixed。若要实现水平方向的fixed,设置_left:expression(documentElement.scrollLeft + "px");

利用给<body>设置固定的背景,防止滚动条滚动时的闪动;如果<body>中要设置滚动的背景而产生冲突,可以把代码写在html选择器里面,如:

复制代码 代码如下:

html {

_background-image: url(about:blank);

_background-attachment: fixed; /* prevent screen flash in IE6 */

}

body {

background-image: url(1.jpg);

background-attachment: scroll;

}

第二种方法 JavaScript

复制代码 代码如下:

<!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>浮动的内容2</div>

<div id="fixed">我的位置是固定的!拉动滚动条看效果。</div>

</body>

</html>

ie6对postion:fixed的完美解决方案

今天去一老外站看到了这他站上的十分平滑但却没有js,好奇,原来。。巧妙啊,分享下,相对而言比较节省资源。但效果好,使用方便,兼顾w3c。哈哈

<>

<>

ie-stuff.css

复制代码 代码如下:

#footer {

position: absolute;

bottom: auto;

clear: both;

top:expression(eval(document.compatMode &&

document.compatMode=='CSS1Compat') ?

documentElement.scrollTop

+(documentElement.clientHeight-this.clientHeight) - 1

: document.body.scrollTop

+(document.body.clientHeight-this.clientHeight) - 1);

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类