Conclusion-IE6, IE7, IE8, and Firefox support fixed bottom and floating navigation effects of js/css.

When I encountered such a problem during the project, the control layer was fixed at the bottom. I initially used Position: fixed, but IE6 didn't support it. Finally I posted a post on the forum, the following three methods are obtained:

First, net_lover's answer is implemented using JS. It judges different browsers.

 

Second, the answer from cewin9999 is implemented through 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 bottom fixed */{position: absolute; bottom: auto; top: expression(eval(document.documentelement.scrolltop#document.doc umentElement. clientHeight-this.offsetHeight-(parseInt (this. currentStyle. marginTop, 10) | 0)-(parseInt (this. currentStyle. marginBottom, 10) | 0 )));}
</Style>

<Div class = "float_con" id = "float_con"> adddddddddddddddddddddddsd </div>

Third: the code that my colleagues can find online is also implemented through JS.

/*
* The target must be a fixed element object or an element id.
* Pos: object/string specifies a fixed position. If the type is object, the json format is used, for example, {right: 200, bottom: 50}. If the type is string, the optional parameters are as follows:
* Cc, center, left lc, right rc
* Lt upper left corner, ct top, rt top right corner
* Lower-left lb, lower cb, and lower-right rb
*/
Var fixPosition = function (target, pos ){
This.tar get = 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 () {// set the location
Var de = document. compatMode = "CSS1Compat "? Document.doc umentElement: document. body;
If (typeof (this. pos) = "string "){//
If (this. isFixed ){

Switch (this. pos. charAt (0 )){
Case "l ":
This.tar get. style. left = "0px ";
Break;
Case "r ":
This.tar get. style. right = "0px ";
Break;
Default:
This.tar get. style. left = (de. clientWidth-this.tar get. clientWidth)/2 + "px ";
Break;
}
Switch (this. pos. charAt (1 )){
Case "t ":
This.tar get. style. top = "0px ";
Break;
Case "B ":
This.tar get. style. bottom = "0px ";
Break;
Default:
This.tar get. style. top = (de. clientHeight-this.tar get. clientHeight)/2 + "px ";
Break;
}
} Else {
Switch (this. pos. charAt (0 )){
Case "l ":
This.tar get. style. left = de. scrollLeft + "px ";
Break;
Case "r ":
This.tar get. style. left = de. scrollLeft + de. clientWidth-this.tar get. clientWidth + "px ";
Break;
Default:
This.tar get. style. left = de. scrollLeft + (de. clientWidth-this.tar get. clientWidth)/2) + "px ";
Break;
}
Switch (this. pos. charAt (1 )){
Case "t ":
This.tar get. style. top = de. scrollTop + "px ";
Break;
Case "B ":
This.tar get. style. top = de. scrollTop + de. clientHeight-this.tar get. clientHeight + "px ";
Break;
Default:
This.tar get. style. top = de. scrollTop + (de. clientHeight-this.tar get. clientHeight)/2) + "px ";
Break;
}
}
} Else {
If (this. isFixed ){
For (var p in this. pos)
This.tar get. style [p] = this. pos [p] + "px ";
} Else {
For (var p in this. pos ){
Switch (p. toLowerCase ()){
Case "left ":
This.tar get. style. left = de. scrollLeft + this. pos [p] + "px ";
Break;
Case "right ":
This.tar get. style. left = de. scrollLeft + de. clientWidth-this.tar get. clientWidth-this. pos [p] + "px ";
Break;
Case "top ":
This.tar get. style. top = de. scrollTop + this. pos [p] + "px ";
Break;
Case "bottom ":
This.tar get. style. top = de. scrollTop + de. clientHeight-this.tar get. clientHeight-this. pos [p] + "px ";
Break;
}
}
}
}
},
Init: function (){
If (! This. pos)
Throw Error ("Invalid arguments [pos].");

This.tar get. style. position = this. isFixed? "Fixed": "absolute ";
Var timer, o = this;
This. AE ("resize", function () {// The position is reset when the size of the browser Form Supporting fixed is changed to prevent center failures.
ClearTimeout (timer );
Timer = setTimeout (function () {o. setPos () ;}, 30 );
});
If (! This. isFixed) {// scroll
This. AE ("scroll", function (){
// ClearTimeout (timer );
// Timer = setTimeout (function () {o. setPos () ;}, 30 );
O. setPos ();
});
}
This. setPos ();
},
ClearPos: function (){
This.tar get. style. left = "";
This.tar get. style. top = "";
This.tar get. style. right = "";
This.tar get. style. bottom = "";
}
}

PS: three methods use a simple layer for testing. However, the third method is the most useful when you join the project. Although the third method looks the most troublesome and complex ~~ I don't know why the first and second layers are used for test OK, but it is still not supported when I join the project in IE6 ~~ To sum up, it may be useful next time !!

 

PPS: http://hi.baidu.com/sunnyzhishui/blog/item/e3ce7e63e49ea6790d33faff.html (js bottom fixed, bottom fixed floating navigation, no JS pure CSS definition)

Http://wenwen.soso.com/z/q244593710.htm (under IE6 let DIV fixed display at the bottom of the browser and horizontal position center how to do ?)

 

Note: This is the method found elsewhere on the Internet. Although I have not achieved the effect, collect it and put it together ~! It may be helpful to others !!