您的位置：首页 > Web前端 > CSS

ie6 fixed bug的解决方法 (css+js)

2010-01-17 00:23 561 查看

#fixed { 
position: absolute; 
top: 0; 
left: 0; 
width: 10em; 
height: 100%; 
} 
body > #fixed { 
position: fixed; 
} 
#content { 
margin-left: 10em; 
background:red; 
height:800px; 
}

利用css选择器覆盖原position的属性值；
fixed层的父层需是body才能这样实现；
但是这样还不完美并不能完全实现效果，因为不会随body页面拉动而滚动
要实现随body页面滚动而滚动需添加以下js代码

<script language="javascript" type="text/javascript"> 
function fixedPop1(){ 
var m=60; //top值 
var obj=document.getElementById("TopDivInner"); //position:fixed对象 
var n=50; //top值 
var obj2=document.getElementById("TopDiv"); //position:fixed对象 
window.onscroll=function(){obj2.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px'; 
obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+m+'px'; 
} 
window.onresize=function(){obj2.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px'; 
obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+m+'px'; 
} 
}; 
$(function(){ 
fixedPop1(); 
}); 
</script>

豆瓣的弹出登陆框就是利用这样的方式实现的，当然要在js代码上加 if IE6的
到此，加上通过js判断屏幕分辨率进而改变弹出框的位置，使其更加合理化，就基本完成了豆瓣弹出登陆款的实现

然而这个在ie6下存在拖动滚动条引起登陆框闪动的问题，为解决这个问题可以利用css e xpression 代价是更高的内存占用

<!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>无标题文档</title> 
<style type="text/css"> 
* 
{ 
margin: 0px; 
padding: 0px; 
} 
body { 
background-image: url(http://global.tianya.cn/global/gnav/css/nothing.txt); 
background-attachment: fixed; /* prevent screen flash in IE6 */ 
} 
#topNavWrapper { 
width: 980px; 
text-align: left; 
height: 31px; 
margin: 0px auto; 
z-index:100; 
_position: relative ; 
_top:0px; 
} 
#topNav { 
width: 980px; 
float: left; 
display: block; 
z-index: 100; 
overflow: visible; 
position: fixed; 
top: 0px; /* position fixed for IE6 */ 
_position: absolute; 
_top: expression(documentElement.scrollTop + "px"); 
background-image: url(http://global.tianya.cn/global/gnav/images/top_r.gif); 
background-repeat: no-repeat; 
background-position: right; 
height: 31px; 
} 
.show{ 
position:absolute; 
top:500px; 
left:400px; 
border:#ff0000 1px solid; 
} 
</style> 
</head> 
<body> 
<div id="topNavWrapper"> 
<ul class="jd_menu" id="topNav"> 
</ul> 
</div> 
这里是大量的br换行标签。
<div class="show">show</div> 
</body> 
</html>

since1984应该利用类似的技术实现其底部半透明框框

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航