zoukankan      html  css  js  c++  java
  • expression解决IE6下固定定位的兼容

    本文所使用的技巧是用了一条 Internet Explorer 的 CSS 表达式 (expression) 。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用 eval 包裹你的语句。

    如何解决“振动”的问题?

    显然 IE 有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重新渲染页面,这个时候它就会重新处理 CSS 表达式。这会引起一个丑陋的“振动” bug ,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。

    解决此问题的技巧就是使用 background-attachment:fixed 为 body 或 html 元素添加一个 background-image:url(about:blank) 。这就会强制页面在重画之前先处理 CSS 。因为是在重画之前处理 CSS ,它也就会同样在重画之前首先处理你的 CSS 表达式。这将让你实现完美的平滑的固定位置元素!
    CSS代码:

    /*让修复IE6 position:fixed不可用的Bug! */
    /* 头部固定 */
    .fixed-top{position:fixed;bottom:auto;top:0px;}
    /* 底部固定 */
    .fixed-bottom{position:fixed;bottom:0px;top:auto;}
    /* 左侧固定 */
    .fixed-left{position:fixed;right:auto;left:0px;}
    /* 右侧固定 */
    .fixed-right{position:fixed;right:0px;left:auto;}
    /* 上面的是除了IE6的主流浏览器通用的方法 */
    /* 修正IE6振动bug */
    * html, * html body{background-image:url(about:blank);background-attachment:fixed;}
    /* IE6 头部固定定位 */
    * html .fixed-top{position:absolute;bottom:auto;
    top:expression(eval(document.documentElement.scrollTop));}
    /* IE6 右侧固定定位 */
    * html .fixed-right{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));}
    /* IE6 底部固定定位 */
    * html .fixed-bottom{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)));}
    /* IE6 左侧固定定位 */
    * html .fixed-left{position:absolute;right:auto;
    left:expression(eval(document.documentElement.scrollLeft));}
    
  • 相关阅读:
    1104 Sum of Number Segments (20 分)(数学问题)
    1092 To Buy or Not to Buy (20 分)(hash散列)
    1082 Read Number in Chinese (25 分)(字符串处理)【背】
    1105 Spiral Matrix (25 分)(模拟)
    初识网络安全及搭建网站(内网)
    HTML5开发者需要了解的技巧和工具汇总(转)
    native+web开发模式之web前端经验分享
    移动平台3G手机网站前端开发布局技巧汇总(转)
    Asp.net 中图片存储数据库以及页面读取显示通用方法详解附源码下载
    使用H3Viewer来查看VS2010的帮助文档
  • 原文地址:https://www.cnblogs.com/mofish/p/2721404.html
Copyright © 2011-2022 走看看