上一篇
下一篇
position:fixed for <IE7
作者:Ollie 日期:2008-08-14
方式一：
css部分
程序代码
*隐藏htmml,body*/
html,body{width:100%; height:100%;
overflow:visible!important;
/*分开写,区分ie8和Opera*/
overflow-x:hidden!important; overflow-y:hidden!important;
overflow:hidden;
margin:0; padding:0}
/*用div伪装body*/
div#body{
position:relative;
width:100%;
height:100%;
overflow-x:auto;
overflow-y:scroll;
background:#fff;
cursor:default
}
/*悬停的元素 id=fixed*/
div#fixed{
position:absolute;
z-index:10;
right:100px;
bottom:100px;
width:400px;
height:300px;
background:#000;
color:#fff;
text-align:center;
line-height:300px
xhtml部分
程序代码
<div id="fixed">
讨厌,我怎么不会动了啊?
</div>
<!-div id=body 为body--->
<div id="body">
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
</div>
（此方法转自：麦鸡的博客）
方式二：
css部分：
程序代码
body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto; background:#ccc;}
#menu {display:block; top:10px; left:10px; width:130px; position:fixed; border:1px solid #990000; padding:10px; text-align:center; font-weight:bold; color:#990000; background:#fff;}
* html #menu {position:absolute;}/*only for ie*/
<!--[if IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
<![endif]-->
方式三：
js：
程序代码
/**
* this js is used to fix IE6 not support css style position:fixed bug,
* it will not take effect in IE7 or FF, please set div style "postion:fixed;" directly.
*
* el is the element position fixed
* top is the element initialized value of top(unit is px)
* left is the element initialized value of left
*
* demo: position_fixed(document.getElementById("div1"), 170);
*/
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";
}
方式四：
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
css部分
程序代码*隐藏htmml,body*/
html,body{width:100%; height:100%;
overflow:visible!important;
/*分开写,区分ie8和Opera*/
overflow-x:hidden!important; overflow-y:hidden!important;
overflow:hidden;
margin:0; padding:0}
/*用div伪装body*/
div#body{
position:relative;
width:100%;
height:100%;
overflow-x:auto;
overflow-y:scroll;
background:#fff;
cursor:default
}
/*悬停的元素 id=fixed*/
div#fixed{
position:absolute;
z-index:10;
right:100px;
bottom:100px;
width:400px;
height:300px;
background:#000;
color:#fff;
text-align:center;
line-height:300px
xhtml部分
程序代码<div id="fixed">
讨厌,我怎么不会动了啊?
</div>
<!-div id=body 为body--->
<div id="body">
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
<p>test1</p>
</div>
（此方法转自：麦鸡的博客）
方式二：
css部分：
程序代码body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto; background:#ccc;}
#menu {display:block; top:10px; left:10px; width:130px; position:fixed; border:1px solid #990000; padding:10px; text-align:center; font-weight:bold; color:#990000; background:#fff;}
* html #menu {position:absolute;}/*only for ie*/
<!--[if IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
<![endif]-->
方式三：
js：
程序代码/**
* this js is used to fix IE6 not support css style position:fixed bug,
* it will not take effect in IE7 or FF, please set div style "postion:fixed;" directly.
*
* el is the element position fixed
* top is the element initialized value of top(unit is px)
* left is the element initialized value of left
*
* demo: position_fixed(document.getElementById("div1"), 170);
*/
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";
}
方式四：
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
文章来自: 
引用通告: 
Tags: 评论: 0 | 引用: 0 | 查看次数: -
发表评论