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

3 篇文章 0 订阅
  1. /*  IE8 火狐  谷歌等 固定样式  */  
  2. .fixed-bottom  
  3. {  
  4.     positionfixed; bottom: 0pxwidth1100px; 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.             positionfixed; 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.         }  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值