JS Perfect solution IE6 does not support position:fixed bugs

About IE6, although it has been abandoned by Microsoft for a long time, but because of the special market (piracy) for the front-end engineers, to solve the problem of IE6 compatibility position:fixed is very important. Especially if you need to hover the call with the end of the head.

Let's take a look at the section code

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<! DOCTYPE html>

The above code is very common online, by setting Html{overflow:hidden} and Body{height:100%;overflow:auto} to achieve IE6 position:fixed effect, but this approach has a flaw, That is: This will make the original page on the absolute, relation have become fixed effect, here I do not do demo, if there is doubt, you can go to the test.

So I looked for the data, found that through an Internet Explorer CSS expression (expression) to achieve the perfect IE6 under the position:fixed effect, CSS code is as follows:

?

1 2 3 4 5 6

/* Common method for IE6 browsers/*. ie6fixedtl{position:fixed;left:0;top:0}. ie6fixedbr{position:fixed;right:0;bottom:0}/* IE6 Browser-specific method * * HTML. Ie6fixedtl{position:absolute;left:expression (eval (document.documentElement.scrollLeft)); : Expression (eval (Document.documentElement.scrollTop))} * HTML. Ie6fixedbr{position:absolute;left:expression (eval ( Document.documentelement.scrollleft+document. Documentelement.clientwidth-this.offsetwidth)-(parseint (this.currentstyle.marginleft,10) | | 0)-(parseint (this.currentstyle.marginright,10) | | 0)); Top:expression (eval (document.documentelement.scrolltop+ document.documentelement.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 elements of the floating margin, to set two times, for example, I want to make an element from the top 10 pixels, the left is also 10 pixels, that is to write:

?

1 2 3 4

/* The common method for IE6 browsers/* ie6fixedtl{position:fixed;left:10px;top:10px}/* IE6 browser-specific method * * HTML. Ie6fixedtl{position: Absolute;left:expression (eval (document.documentelement.scrollleft+10)); Top:expression (eval ( DOCUMENT.DOCUMENTELEMENT.SCROLLTOP+10))}

In this way, the effect of IE6 to achieve position:fixed solution, but also will not affect other absolute, relation, but there is a problem, is that the suspension of elements will appear vibration

IE has a multi-step rendering process. When you scroll or resize your browser, it resets all the content and draws the page again, and this time it will process the CSS expression again. This can cause an ugly "vibrating" bug where the fixed-position elements need to be adjusted to keep up with the scrolling of your (page) and then "bounce".

The trick to solving this problem is to add a background-image to the body or HTML element using background-attachment:fixed. This forces the page to process the CSS before it is repaint. Because you're working with CSS before you redraw it, it will also process your CSS expression before you redraw it. This will allow you to achieve the perfect smoothing of fixed position elements!

Then I found that Background-image did not need a real picture, set to About:blank on the line.

The complete code is attached below

?

* * * * IE6 Browser general method/. ie6fixedtl{position:fixed;left:0;top:0}. ie6fixedbr{position:fixed;right:0;bottom:0}/* IE6 Browser's Unique method */////* fix IE6 Vibration bug/* html,* HTML Body{background-image:url (About:blank); background-attachment:fixed} * HTML . Ie6fixedtl{position:absolute;left:expression (eval (document.documentElement.scrollLeft)); Top:expression (eval ( DOCUMENT.DOCUMENTELEMENT.SCROLLTOP))} * HTML. Ie6fixedbr{position:absolute;left:expression (eval ( Document.documentelement. Scrollleft+document.documentelement.clientwidth-this.offsetwidth)-(ParseInt ( this.currentstyle.marginleft,10) | | 0)-(parseint (this.currentstyle.marginright,10) | | 0)); Top:expression (eval (document.documentelement.scrolltop+ document.documentelement.clientheight-this.offsetheight-(parseint (this.currentstyle.margintop,10) | | 0)-(parseint (this.currentstyle.marginbottom,10) | | 0))}

The above is the entire contents of this article, I hope you can enjoy.