【一天一道兼容性】之——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>

 

 

 

转载于:https://www.cnblogs.com/ccto/archive/2013/04/22/3036178.html