1. 程式人生 > >IE瀏覽器 position:fixed 問題

IE瀏覽器 position:fixed 問題

 這個是我之前的解決辦法:

<!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" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="Author" content="" />
<title>1title>

<style type="text/css"> 

*html{overflow:hidden;}
*body{height:100%;overflow:auto;}
body {margin:0; padding:0; height:100%; }
.fixed {position:fixed;}
.fixed {_position:absolute;_right:16px;} /* [only for ie] "right=16px"是為了顯示滾動條,即right最小值為16px */

#menu4 {width:135px; height:150px; padding:10px; background:#333; line-height:20px; color:#FFF; bottom:0;right:0;_right:16px;border:1px solid red;} /* 注意:right需要去掉滾動條寬度16px */

/*margin-top:-75px; top:50%;  元素即會居中顯示*/

</style>

</head>
<body>
<div id="menu4" class="fixed">
sdfasdfasdfasdfsaf
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

/*問題:頁面上原有的absolute、relation都變成fixed的效果*/

後來找到的辦法:

/* 除IE6瀏覽器的通用方法 */

.ie6fixedTL{position:fixed;left:0;top:0} 

.ie6fixedBR{position:fixed;right:0;bottom:0} 

/* IE6瀏覽器的特有方法 */

* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))} 

* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

如果想設定邊距:

/* 除IE6瀏覽器的通用方法 */

.ie6fixedTL{position:fixed;left:10px;top:10px} 

/* IE6瀏覽器的特有方法 */

* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft+10));top:expression(eval(document.documentElement.scrollTop+10))}

也可以這樣設定邊距:

/* 除IE6瀏覽器的通用方法 */

.ie6fixedTL{position:fixed;left:10px;top:10px} 

/* IE6瀏覽器的特有方法 */

.ie6fixedTL{_left:10px;_top:10px} 

據說用這個方法懸浮的元素會出現振動(沒試過),可以加上這段css,進行解決:

* html,* html body{background-image:url(about:blank);background-attachment:fixed} 

/*問題:非常消耗瀏覽器的效能,如果頁面遮蔽了js,可能就不會好用了*/

js解決的辦法:

function position_fixed(el, eltop, elleft){  
    // check is IE6  
    if(!window.XMLHttpRequest)  
    window.onscroll = function(){  
        el.style.top = (document.documentElement.scrollTop + eltop)+"px";  
        el.style.left = (document.documentElement.scrollLeft + elleft)+"px";  
    }  
    else el.style.position = "fixed";  

/*問題:會閃爍*/