總結–IE6，IE7，IE8，Firefox都支援：js/css 底部固定, 底部固定漂浮導航效果

在做項目的過程中遇到一個這樣的問題，控制層在底部固定，最初用Position：fixed 是可以，但IE6不支援，最後在論壇上發了貼，得到了如下三種方法：

第一：net_lover  的回答，他是用JS來實現的，通過判斷不同的瀏覽器

 

第二：cewin9999  的回答，他是通過CSS來實現的

<style type="text/css">
body{ background-color:#1f8bbb; }

.float_con{ background:url(../images/footer_bg.gif) repeat-x; height:28px; text-align:center;  color:#fff; font:bold 12px/28px Tahoma, Geneva, sans-serif; bottom:0px; position:fixed; width:500px; background-color:#fff;color:#000;}

* html .float_con /* IE6 底部固定  */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
</style>

<div class="float_con" id="float_con">adddddddddddddddddddddsd</div>

第三：同事幫忙在網上找的代碼，也是通過JS來實現的

/* 
*target 要固定的元素對象，也可以是元素的id 
*pos:object/string 指定固定到的位置，類型為object時，使用json方式如{right:200,bottom:50} ，為string時選擇性參數如下： 
*cc,正中間,lc  左邊,rc 右邊 
*lt  左上方,ct 上邊,rt  右上方 
*lb 左下角,cb 底部,rb 右下角 
*/
var fixPosition = function(target, pos) {
    this.target = this.g(target);
    this.pos = pos;
    this.init(); //
};

fixPosition.prototype = {
    isFixed: !window.ActiveXObject || (navigator.userAgent.indexOf("MSIE 6") == -1 && document.compatMode == "CSS1Compat"),
    ae: function(e, call) {
        if (window.addEventListener) window.addEventListener(e, call, false);
        else window.attachEvent("on" + e, call);
    },
    g: function(id) { return typeof (id) == "string" ? document.getElementById(id) : id; },
    setPos: function() {//設定位置
        var de = document.compatMode == "CSS1Compat" ? document.documentElement : document.body;
        if (typeof (this.pos) == "string") {//
            if (this.isFixed) {

                switch (this.pos.charAt(0)) {
                    case "l":
                        this.target.style.left = "0px";
                        break;
                    case "r":
                        this.target.style.right = "0px";
                        break;
                    default:
                        this.target.style.left = (de.clientWidth - this.target.clientWidth) / 2 + "px";
                        break;
                }
                switch (this.pos.charAt(1)) {
                    case "t":
                        this.target.style.top = "0px";
                        break;
                    case "b":
                        this.target.style.bottom = "0px";
                        break;
                    default:
                        this.target.style.top = (de.clientHeight - this.target.clientHeight) / 2 + "px";
                        break;
                }
            } else {
                switch (this.pos.charAt(0)) {
                    case "l":
                        this.target.style.left = de.scrollLeft + "px";
                        break;
                    case "r":
                        this.target.style.left = de.scrollLeft + de.clientWidth - this.target.clientWidth + "px";
                        break;
                    default:
                        this.target.style.left = de.scrollLeft + ((de.clientWidth - this.target.clientWidth) / 2) + "px";
                        break;
                }
                switch (this.pos.charAt(1)) {
                    case "t":
                        this.target.style.top = de.scrollTop + "px";
                        break;
                    case "b":
                        this.target.style.top = de.scrollTop + de.clientHeight - this.target.clientHeight + "px";
                        break;
                    default:
                        this.target.style.top = de.scrollTop + ((de.clientHeight - this.target.clientHeight) / 2) + "px";
                        break;
                }
            }
        } else {
            if (this.isFixed) {
                for (var p in this.pos)
                    this.target.style[p] = this.pos[p] + "px";
            } else {
                for (var p in this.pos) {
                    switch (p.toLowerCase()) {
                        case "left":
                            this.target.style.left = de.scrollLeft + this.pos[p] + "px";
                            break;
                        case "right":
                            this.target.style.left = de.scrollLeft + de.clientWidth - this.target.clientWidth - this.pos[p] + "px";
                            break;
                        case "top":
                            this.target.style.top = de.scrollTop + this.pos[p] + "px";
                            break;
                        case "bottom":
                            this.target.style.top = de.scrollTop + de.clientHeight - this.target.clientHeight - this.pos[p] + "px";
                            break;
                    }
                }
            }
        }
    },
    init: function() {
        if (!this.pos)
            throw Error("Invalid arguments [pos].");

        this.target.style.position = this.isFixed ? "fixed" : "absolute";
        var timer, o = this;
        this.ae("resize", function() {//支援fixed的瀏覽器表單大小改變時也重設位置，防止中間無法置中
            clearTimeout(timer);
            timer = setTimeout(function() { o.setPos(); }, 30);
        });
        if (!this.isFixed) {//滾動
            this.ae("scroll", function() {
                //clearTimeout(timer);
                //timer=setTimeout(function() { o.setPos(); },30);
                o.setPos();
            });
        }
        this.setPos();
    },
    clearPos: function() {
        this.target.style.left = "";
        this.target.style.top = "";
        this.target.style.right = "";
        this.target.style.bottom = "";
    }
}

  

PS：三種方法用一個簡單的層來測試都OK，但是加入項目中最好用的卻是第三種，雖然第三種看起來最麻煩最複雜~~不知道為什麼第一種和第二種用層測試OK，但加入項目中在IE6裡面還是不支援~~在此總結一下，或許下次能派上用場呢！！

 

PPS：http://hi.baidu.com/sunnyzhishui/blog/item/e3ce7e63e49ea6790d33faff.html （js 底部固定, 底部固定漂浮導航，無JS純CSS定義）

           http://wenwen.soso.com/z/q244593710.htm（IE6下讓DIV固定顯示在瀏覽器底部並水平位置置中如何做？）

 

註：這是在網上其他地方找的方法，雖然我沒實現效果，也收集起來放一起吧~！或許可以給其他人提供借鑒呢！！