码迷,mamicode.com
首页 > 其他好文 > 详细

打造IE6的position:fixed整理篇

时间:2014-04-30 13:43:11      阅读:341      评论:0      收藏:0      [点我收藏+]

标签:com   http   blog   style   class   div   img   code   java   log   javascript   

fixed真的是一个很好的属性。特别是做弹层的时候。可惜的是“国内主流浏览器”IE6大大不支持。

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

1
2
3
4
5
.fixed {
position:absolute;
left:expression(eval(document.documentElement.scrollLeft));
top:expression(eval(document.documentElement.scrollTop))
}

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

bubuko.com,布布扣
html,html body {
background-image:url(about:blank);
background-attachment:fixed
}
bubuko.com,布布扣

这个已经是IE很出名的“BUG” 了,当滚动或调整浏览器大小时,它将重置所有内容并重画页面,会重新处理CSS表达式,最终就闪坏了施主的钛合金眼。上面的代码可以让浏览器在重画之前首先处理CSS表达式,这样就让你实现完美的fixed了。

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

非IE6的时候

bubuko.com,布布扣
.float {
left:50%;
top:50%;
margin-left:-262px;
margin-top:-180px;
width:525px;
height:360px;
}
bubuko.com,布布扣


 left和top的属性已经被表达式占用了。这个也很简单的,获取页面的宽度和高度,计算出直接的margin值就好了。

注意高度应该用document.documentElement.clientHeight,这样的话就是可视区域的高度。特别是用遮罩层的时候,否则会出现,页面可以无限下拉的情况。

打造IE6的position:fixed整理篇,布布扣,bubuko.com

打造IE6的position:fixed整理篇

标签:com   http   blog   style   class   div   img   code   java   log   javascript   

原文地址:http://www.cnblogs.com/js-c/p/3699324.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!