首页 > 建站教程 > Div+Css >  兼容包含IE6在内的主流浏览器的position:fixed方法正文

兼容包含IE6在内的主流浏览器的position:fixed方法

html代码(如果不需要兼容IE6,下面的css代码足矣。):
<div style="position: absolute; top: 3000px;">dummy</div>
<div id="footer">footer</div>
css代码:
<style type="text/css">
#footer {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #c00;
    color: #fff;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
}
</style>
js代码:
<script type="text/javascript">
var footer = document.getElementById("footer");
var msie6 = /msie\s6/i.test(navigator.userAgent);
if(msie6) {
    footer.style.position = "absolute";
    footer.style.top =
        document.documentElement.clientHeight -
        footer.offsetHeight + "px";
}
window.onscroll = function() {
    if(msie6) {
        footer.style.top =
            document.documentElement.scrollTop +
            document.documentElement.clientHeight -
            footer.offsetHeight + "px";
    }
};
</script>

如果需要兼容 IE6,那就要使用 JavaScript,把上面的代码放到 上面。当页面滚动的时候,footer 会出现微小的跳动,这是不可避免的。