ie6 fixed bug的处理方式 (css+js)

日期:2020-09-28 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的


拷贝编码
编码以下:

#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: e­xpression(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应当运用相近的技术性完成其底部半全透明框框