zoukankan      html  css  js  c++  java
  • 【一天一道兼容性】之——IE6下fixed失效

    问题:

    demo:

    1  <style>
    2         html, body {margin: 0;padding: 0;}
    3         body {background-color: #aaa;height: 2000px;}
    4         #alertFram {background-color: #a00;width: 50px;height: 50px;position: fixed;left: 50%;top: 20%;}//IE6下fixed失效
    5  </style>
    6  <div id="alertFram"></div>

    解析问题:

    IE直到IE7才支持fixed,所以只需要针对IE6进行兼容处理

    采取window.onscroll模拟,但是单纯的绝对定位+计算位置会出现恶心的抖动,所以要用body背景固定的方法。

    解决问题:

     1 <script>
     2         (function (win, doc) {
     3             var isIE6 = !!doc.all && doc.documentMode == undefined,
     4                 div = doc.getElementById("alertFram"),
     5                 html = doc.getElementsByTagName('html')[0],
     6                 divTop = 0;
     7             if (isIE6 && doc.body.currentStyle.backgroundAttachment !== 'fixed') {
     8                 html.style.backgroundImage = 'url(about:blank)';
     9                 html.style.backgroundAttachment = 'fixed';
    10                 div.style.position = "absolute";
    11                 divTop = parseFloat(div.currentStyle.top) || 100;
    12                 window.onscroll = fixedHandle;
    13             };
    14             function fixedHandle() {
    15                 div.style.top = doc.documentElement.scrollTop + divTop + 'px';
    16             }
    17         })(window, document)
    18 </script>
  • 相关阅读:
    图片懒加载技术
    验证码处理
    基于requests模块的cookie,session和线程池爬取
    最快理解
    Golang
    Django REST framework
    Django REST framework
    Django
    Django
    搭建邮件服务器 Postfix + Dovecot (CentOS)
  • 原文地址:https://www.cnblogs.com/ccto/p/3036178.html
Copyright © 2011-2022 走看看