【一天一道兼容性】之——IE6下fixed失效
2013-04-22 18:36
162 查看
问题:
demo:
解析问题:
IE直到IE7才支持fixed,所以只需要针对IE6进行兼容处理
采取window.onscroll模拟,但是单纯的绝对定位+计算位置会出现恶心的抖动,所以要用body背景固定的方法。
解决问题:
demo:
<style> html, body {margin: 0;padding: 0;} body {background-color: #aaa;height: 2000px;} #alertFram {background-color: #a00;width: 50px;height: 50px;position: fixed;left: 50%;top: 20%;}//IE6下fixed失效 </style> <div id="alertFram"></div>
解析问题:
IE直到IE7才支持fixed,所以只需要针对IE6进行兼容处理
采取window.onscroll模拟,但是单纯的绝对定位+计算位置会出现恶心的抖动,所以要用body背景固定的方法。
解决问题:
<script> (function (win, doc) { var isIE6 = !!doc.all && doc.documentMode == undefined, div = doc.getElementById("alertFram"), html = doc.getElementsByTagName('html')[0], divTop = 0; if (isIE6 && doc.body.currentStyle.backgroundAttachment !== 'fixed') { html.style.backgroundImage = 'url(about:blank)'; html.style.backgroundAttachment = 'fixed'; div.style.position = "absolute"; divTop = parseFloat(div.currentStyle.top) || 100; window.onscroll = fixedHandle; }; function fixedHandle() { div.style.top = doc.documentElement.scrollTop + divTop + 'px'; } })(window, document) </script>
相关文章推荐
- 【一天一道兼容性】之——IOS4及以下fixed失效
- 【一天一道兼容性】之——IOS4及以下fixed失效
- 【一天一道兼容性】之——IE6、7、8中的空格、折行
- 【一天一道兼容性】之——IE6、7中的setAttribute
- 【一天一道兼容性】之——IE、FF、Chrome下的表单重定向的挂起
- 【一天一道兼容性】之——IE、FF、Chrome下的表单重定向的挂起
- 【一天一道兼容性】之——IE下new Date()的传参格式
- 解决IE6下position:fixed失效的方法
- 【css】css 解决 ie6 下 position:fixed 失效
- 解决ie6下fixed定位兼容性问题
- IE6下position fixed失效的解决方法(亲测有效)
- ie6下position fixed的失效bug
- csshack 解决ie6下position:fixed失效的问题
- position:fixed兼容性 IE6震动
- IE6中的position:fixed定位兼容性写法分享
- position:fixed兼容性 IE6震动
- position:fixed兼容性 IE6震动
- IE6下处理fixed的手段和方法
- 《github一天一道算法题》:插入排序
- IE6 Fixed