纯CSS定位的固定浮动层代码 不闪 兼容IE6 八 火狐 谷歌等

纯CSS定位的固定浮动层代码 不闪 兼容IE6 8 火狐 谷歌等

1. /*??IE8?火狐??谷歌等?固定样式??*/??
2. .fixed-bottom??
3. {??
4. ????position:?fixed;?bottom:?0px;?width:?1100px;?left:?50%;??margin-left:?-550px;??
5. }??
6. ??
7. /*??IE6?固定样式?*/??
8. *?html,*?html?body?/*?修正IE6振动bug?*/??
9. {??
10. ????background-image:url(about:blank);????/*用浏览器空白页面作为背景*/??
11. ????background-attachment:fixed;?/*?prevent?screen?flash?in?IE6?确保滚动条滚动时，元素不闪动*/??
12. }??
13. *?html?.fixed-top?/*?IE6?头部固定?*/??
14. {??
15. ????position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));??
16. }??
17. *?html?.fixed-right?/*?IE6?右侧固定?*/???
18. {??
19. ????position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));??
20. }??
21. *?html?.fixed-bottom?/*?IE6?底部固定?*/??
22. {??
23. ????position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));??
24. }??
25. *?html?.fixed-left?/*?IE6?左侧固定?*/??
26. {??
27. ????position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));??
28. }??

1. /*??IE8?火狐??谷歌等?固定样式??*/??
2. ????????.fixed-middle????????{??
3. ????????????position:?fixed;?left:50%;?top:?50%;??margin-top:?-80px;margin-left:-155px;??
4. ????????}??
5. ??
6. ????????/*??IE6?固定样式?*/??
7. ????????*?html,*?html?body?/*?修正IE6振动bug?*/??
8. ????????{??
9. ????????????background-image:url(about:blank);????/*用浏览器空白页面作为背景*/??
10. ????????????background-attachment:fixed;?/*?prevent?screen?flash?in?IE6?确保滚动条滚动时，元素不闪动*/??
11. ????????}??
12. ????????*?html?.fixed-middle?/*?IE6?居中固定?*/??
13. ????????{??
14. ????????????position:absolute;??
15. ????????????bottom:auto;top:expression(eval(document.documentElement.scrollTop)?+?document.documentElement.clientHeight/2?-?this.offsetHeight/2);??
16. ????????????margin-top:0px;??
17. ????????} ?