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> </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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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";
}