Perfect solution to the bug that IE6 does not support position: fixed

<! DOCTYPE html> 





Tip: the code can be modified before running!

The above code is common on the Internet. You can set html {overflow: hidden} and body {height: 100%; overflow: auto} to implement position: fixed in ie6, however, this method has a defect: this will make the original absolute and relation on the page become fixed. Here I will not make a demo. If there is any doubt, you can test it on your own.
So I found the following information and found that I can use an Internet Explorer CSS expression (expression) to perfectly implement the position: fixed effect under ie6. the css code is as follows:
Copy to ClipboardReference: [www.bkjia.com]/* General method except for Internet Explorer 6 */

. Ie6fixedTL {position: fixed; left: 0; top: 0}

. Ie6fixedBR {position: fixed; right: 0; bottom: 0}

/* Unique methods of Internet Explorer 6 */

* Html. ie6fixedTL {position: absolute; left: expression(eval(document.doc umentElement. scrollLeft); top: expression(eval(document.doc umentElement. scrollTop ))}

* Html. ie6fixedBR {position: absolute; left: expression(eval(document.documentelement.scrollleft?document.doc umentElement. clientWidth-this.offsetWidth)-(parseInt (this. currentStyle. marginLeft, 10) | 0)-(parseInt (this. currentStyle. marginRight, 10) | 0); top: expression(eval(document.documentelement.scrolltop#document.doc umentElement. clientHeight-this.offsetHeight-(parseInt (this. currentStyle. marginTop, 10) | 0)-(parseInt (this. currentStyle. marginBottom, 10) | 0 )))}
The above code can be used directly. If you want to set the element floating margin, you have to set it twice. For example, if you want to make an element 10 pixels away from the top and 10 pixels away from the left, you need to write it like this:
Copy to ClipboardReference: [www.bkjia.com]/* General method except for Internet Explorer 6 */

. Ie6fixedTL {position: fixed; left: 10px; top: 10px}

/* Unique methods of Internet Explorer 6 */

* Html. ie6fixedTL {position: absolute; left: expression(eval(document.doc umentElement. scrollLeft + 10); top: expression(eval(document.doc umentElement. scrollTop + 10 ))}
In this way, the effect of position: fixed in IE6 is solved, and it does not affect other absolute and relation. But there is another problem, that is, the floating element will vibrate.
IE has a multi-step rendering process. When you scroll or adjust the size of your browser, it will reset all content and redraw the page, and then it will re-process the css expression. This will lead to an ugly "vibration" bug where elements at a fixed position need to be adjusted to keep up with your (PAGE) scrolling, so it will "Beat ".
To solve this problem, use background-attachment: fixed to add a background-image to the body or html element. This forces the page to process CSS before re-painting. Because CSS is processed before re-painting, it will also process your CSS expression before re-painting. This will allow you to achieve the perfect smooth and fixed position element! Then I found that the background-image does not require a real image. Set it to about: blank.
Complete code is attached below
Copy to ClipboardReference: [www.bkjia.com]/* General method except for Internet Explorer 6 */

. Ie6fixedTL {position: fixed; left: 0; top: 0}

. Ie6fixedBR {position: fixed; right: 0; bottom: 0}

/* Unique methods of Internet Explorer 6 */

/* Corrected the IE6 vibration bug */

* Html, * html body {background-image: url (about: blank); background-attachment: fixed}

* Html. ie6fixedTL {position: absolute; left: expression(eval(document.doc umentElement. scrollLeft); top: expression(eval(document.doc umentElement. scrollTop ))}

* Html. ie6fixedBR {position: absolute; left: expression(eval(document.documentelement.scrollleft?document.doc umentElement. clientWidth-this.offsetWidth)-(parseInt (this. currentStyle. marginLeft, 10) | 0)-(parseInt (this. currentStyle. marginRight, 10) | 0); top: expression(eval(document.documentelement.scrolltop#document.doc umentElement. clientHeight-this.offsetHeight-(parseInt (this. currentStyle. marginTop, 10) | 0)-(parseInt (this. currentStyle. marginBottom, 10) | 0 )))}
As for the demo, I think everyone can see it :)
From: blog