|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。
网页制造Webjx文章简介:IE6下不兼容position:fixed属性!在网上也看了一些材料仍是不可!
IE6下不兼容position:fixed属性!在网上也看了一些材料仍是不可!
position:fixed;这个属性用起来的确很便利,能够轻松的完成流动地位的浮动层效果。可是,它不撑持IE6及以下版本。因而良多同砚利用JS摹拟。明天写了一个DEMO,触及左边、右边。及高低双方,共四种地位的流动,与以往的教程分歧的中央是,它利用CSS表达式来兼容IE5、IE6,且制止了js摹拟时,拖动转动条时呈现发抖的成绩,别的在IE5大概怪癖形式下也完整一般,没有任何成绩。假如你有更好的计划,接待来喷我。
上面是代码
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>position:fixed——webjx.com</title>
<styletype="text/css">
*{
padding:0;
margin:0;
}
#content{
height:5000px;
width:50%;
border-right:10pxdottedred;
}
#demo_t,#demo_b,#demo_l,#demo_r{
background:#f90;
position:fixed;
}
#demo_t,#demo_b{
left:0;
width:100%;
}
#demo_l,#demo_r{
width:50px;
top:300px;
}
#demo_t{
top:0;
}
#demo_b{
bottom:0;
}
#demo_l{
left:0;
}
#demo_r{
right:0;
}
</style>
<!--[iflteIE6]>
<styletype="text/css">
html{
/*这个可让IE6下转动时无发抖*/
background:url(about:black)no-repeatfixed
}
#demo_t,#demo_b,#demo_l,#demo_r{
position:absolute;
}
#demo_t,#demo_b{
/*这个办理body有padding时,IE6下100%不克不及展满的成绩*/
width:expression(offsetParent.clientWidth);
}
/*上面三组划定规矩用于IE6下top盘算*/
#demo_l,#demo_r{
top:expression(offsetParent.scrollTop+300);
}
#demo_t{
top:expression(offsetParent.scrollTop);
}
#demo_b{
top:expression(offsetParent.scrollTop+offsetParent.clientHeight-offsetHeight);
}
</style>
<![endif]-->
</head>
<body>
<divid="demo_t">此处显现id"demo"的内容</div>
<divid="demo_b">此处显现id"demo"的内容</div>
<divid="demo_l">此处显现id"demo"的内容</div>
<divid="demo_r">此处显现id"demo"的内容</div>
<divid="content"></div>
</body>
</html>
倡议在实践利用时,将IE前提正文中的代码放在独自的css文件中,以便勤俭其他扫瞄器的流量。
特地顶一下微软的这个项目,如今有中文版了,倡议宽大前端er到场这一行列,尽快死亡IE6
</p>
更好的控制页面布局。不用多说。 |
|