您的位置:首页 > 其它

【一天一道兼容性】之——IE6下fixed失效

2013-04-22 18:36 162 查看
问题:

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: