mthoutai

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

fixed真的是一个非常好的属性。

特别是做弹层的时候。可惜的是“国内主流浏览器”IE6大大不支持。

一般的我们都会通过CSS中的表达式来解决问题。

.fixed { 
position:absolute; 
left:expression(eval(document.documentElement.scrollLeft)); 
top:expression(eval(document.documentElement.scrollTop)) 
}

好吧,希望施主的钛合金眼还好。一闪一闪亮晶晶~~~

html,html body {
background-image:url(about:blank);
background-attachment:fixed
}

这个已经是IE非常出名的“BUG” 了。当滚动或调整浏览器大小时,它将重置全部内容并重画页面,会又一次处理CSS表达式。终于就闪坏了施主的钛合金眼。

上面的代码能够让浏览器在重画之前首先处理CSS表达式,这样就让你实现完美的fixed了。

事实上还有个问题了……,做弹层的时候居中的问题。

非IE6的时候

.float {
left:50%;
top:50%;
margin-left:-262px;
margin-top:-180px;
width:525px;
height:360px;
}

 left和top的属性已经被表达式占用了。

这个也非常easy的,获取页面的宽度和高度,计算出直接的margin值就好了。

注意高度应该用document.documentElement.clientHeight,这种话就是可视区域的高度。

特别是用遮罩层的时候,否则会出现,页面能够无限下拉的情况。


posted on 2017-08-20 15:28  mthoutai  阅读(175)  评论(0编辑  收藏  举报