页脚在IE7中重叠内容? :(

时间:2009-10-09 03:15:56

标签: css internet-explorer-7 cross-browser

由于参与stackoverflow的精彩人员see here,我认为我的布局正常工作。不幸的是,虽然我在IE7中发现了一个问题(尚未在IE6中检查过!) - 页脚与内容重叠

我把网站up on my development server here。我希望我不必再从头开始让它发挥作用,CSS将会拯救......

1 个答案:

答案 0 :(得分:0)

将页脚推到视口底部的快速简便方法是使用以下JavaScript。诀窍是有一个单独的容器和一个页脚,并在脚本中引用这些ID:

在头标中:

        < script type =“text / javascript”>         <! -         window.onload = function(){             setFooter();         }         window.onresize = function(){             setFooter();         }         // - >     < /脚本>

脚本:

try {
    document.execCommand("BackgroundImageCache", false, true);
}
catch (err) {

}

function getWindowHeight() {
    var windowHeight = 0;
    if (typeof (window.innerHeight) == 'number') {
        windowHeight = window.innerHeight;
    }
    else {
        if (document.documentElement && document.documentElement.clientHeight) {
            windowHeight = document.documentElement.clientHeight;
        }
        else {
            if (document.body && document.body.clientHeight) {
                windowHeight = document.body.clientHeight;
            }
        }
    }
    return windowHeight;
}
function setFooter() {
    if (document.getElementById) {
        var windowHeight = getWindowHeight();
        if (windowHeight > 0) {
            var contentHeight = document.getElementById('container').offsetHeight;
            var footerElement = document.getElementById('footerContainer');
            var footerHeight = footerElement.offsetHeight;
            if (windowHeight - (contentHeight + footerHeight) >= 0) {
                footerElement.style.position = 'relative';
                footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
            }
            else {
                footerElement.style.position = 'static';
            }
        }
    }
}