position:fixed?

« 上火

2008-04

分类:JavaScript , Web标准,关键词:No Data

已有 1,194 位领导视察,其中有 1 位领导做了批示.

position:fixed在ie6及以下版本下不大好用
firefox运行:

<!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>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  p
  {
  height:100px;
  }
  </style>
 </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>
  <div style="position:fixed;right:3px;bottom:3px;"><img src="http://bbs.blueidea.com/images/default/logo.gif" /></div>
 </body>
</html>

运行代码

于是用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>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
  <div id="test" style="position:absolute;z-index:99;width:200px;text-align:right;">
<img src="http://bbs.blueidea.com/images/default/logo.gif" />
</div>

<script type="text/javascript">
var img = document.getElementById('test');
function test(){
	img.style.top = (document.documentElement.clientHeight - img.offsetHeight + document.documentElement.scrollTop) + 'px';
	img.style.left = document.documentElement.clientWidth - img.offsetWidth + document.documentElement.scrollLeft + 'px';
}
setInterval(test, 250);
</script>
 </body>
</html>

运行代码

1 Responses

llinzzi 四月 30 2008 , 14:00

#befixiedd{
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);
}

#1