返回列表

IE6,7 居中闪动问题 - IE6,7下expression的应用

默认分类 2014/07/14 18:54

IE7已经支持position:fixed,因此只需判断IE6再单独处理就可以了。

使用expression或setExpression

// IE6
if (window.ActiveXObject && !window.XMLHttpRequest) {
    var hj001_quicklogin = hui.c('hj001_quicklogin')[0];
    hj001_quicklogin.style.setExpression('top' , 'eval(document.documentElement.scrollTop  + Math.max(0, (document.documentElement.clientHeight - 500)*0.4))');
    hj001_quicklogin.style.setExpression('left', 'eval(document.documentElement.scrollLeft + Math.max(0, (document.documentElement.clientWidth - 427))/2)');
    /*if (!hui.util.hasCssString('hj001_quicklogin_fixed_7181549444794655')) {
        hui.util.importCssString('.hj001_quicklogin {_top: expression(document.documentElement.scrollTop + Math.max(0, (document.documentElement.clientHeight - 500)*0.3) + "px");_left: expression(document.documentElement.scrollLeft + Math.max(0, (document.documentElement.clientWidth - 427))/2 + "px")}}', 'hj001_quicklogin_fixed_7181549444794655');
    }*/
}
else {
    hui.util.importCssString('.hj001_quicklogin {top:' + top + 'px;left:' + left + 'px;}', 'hj001_quicklogin_fixed_7181549444794655');
}

有几点需要注意:

1.使用expression来实现position:fixed的效果时,会出现闪动的现象,可以通过下面的方法解决:

html{_background-image: url('about:blank');_background-attachment:fixed;}

2.判断IE6推荐

window.ActiveXObject && !window.XMLHttpRequest

3.使用setExpression时需要带上eval,否则不会无效

正确:hj001_quicklogin.style.setExpression('top' , 'eval(document.documentElement.scrollTop)');
错误:hj001_quicklogin.style.setExpression('top' , 'document.documentElement.scrollTop');

完整代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript">window.g = function(id){return document.getElementById(id)};</script>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hui demo</title>
<style>
html {_background-image: url("about:blank");_background-attachment: fixed;}
.box {z-index: 9000000;position: fixed; _position: absolute; _top: expression(document.documentElement.scrollTop + Math.max(0, (document.documentElement.clientHeight - 500)*0.3) + "px")}

</style>
<script type="text/javascript">
<!--
var box = {
    onresize: function () {
            var width = 427, 
                height = 500,
                main = document.getElementById('box');
            // IE6
            if (window.ActiveXObject && !window.XMLHttpRequest) {
                main.style.setExpression('top',  'eval(document.documentElement.scrollTop  + Math.max(0, (document.documentElement.clientHeight - ' + height + ')*0.4))');
                main.style.setExpression('left', 'eval(document.documentElement.scrollLeft + Math.max(0, (document.documentElement.clientWidth -  ' + width  + ')*0.5))');
            }
            else {
                main.style.top  = Math.max(0, (document.documentElement.clientHeight - height) * 0.3) + 'px';
                main.style.left = Math.max(0, (document.documentElement.clientWidth  - width ) * 0.5) +'px';
            }
        }
};

function doit(){ 
    box.onresize();
    window.onresize = function () {
        box.onresize();
    };
}

//-->
</script>
</head>

<body><button type="button" onclick="doit()">doit</button>
<div id="box" class="box" style="border: 2px solid green; width: 427px; height: 500px;">
box
</div>
<p style="height: 1600px;">
txt
</p>
</body>

</html>