Implement CSS attribute of position fixed supported by IE6

As we all know, IE6 does not support position: fixed. This bug is just as notorious as IE6's double margin bug and PNG transparency bug.

How can I make position: fixed work in IE6?

The trick used in this article is to use an Internet Explorer CSS expression (expression ). You cannot directly use this expression because it may not be updated because of the cache. The simplest way to solve this is to use eval to wrap your statement.

How can we solve the "vibration" problem?

Obviously, ie has a multi-step rendering process. When you scroll or adjust the size of your browser, it will reset all content and re-render 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 handle 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!

Another trick I found is that you don't need a real picture at all! You can use an about: blank to replace a spacer.gif image, and it works equally well.

 

/* Make position: Fixed available in IE6! * // * Fixed the header */. fixed-top {position: fixed; bottom: auto; top: 0px;}/* fixed at the bottom */. fixed-bottom {position: fixed; bottom: 0px; top: auto;}/* fixed on the left */. fixed-left {position: fixed; Right: auto; left: 0px;}/* fixed on the right */. fixed-right {position: fixed; Right: 0px; left: auto ;} /* The above is a common method except for mainstream IE6 browsers * // * corrected IE6 vibration bug */* HTML, * html body {background-image: URL (about: blank); background-Attachment: fixed;}/* IE6 head fixed */* HTML. fixed-top {position: absolute; bottom: auto; top: expression(eval(document.doc umentelement. scrolltop);}/* fixed to the right of IE6 */* HTML. fixed-right {position: absolute; Right: auto; left: expression(eval(document.documentelement.scrollleft?document.doc umentelement. clientWidth-this.offsetWidth)-(parseint (this. currentstyle. marginleft, 10) | 0)-(parseint (this. currentstyle. marginright, 10) | 0);}/* fixed at the bottom of IE6 */* HTML. fixed-bottom {position: absolute; bottom: auto; top: expression(eval(document.documentelement.scrolltopdeskdocument.doc umentelement. clientHeight-this.offsetHeight-(parseint (this. currentstyle. margintop, 10) | 0)-(parseint (this. currentstyle. marginbottom, 10) | 0);}/* fixed on the left of IE6 */* HTML. fixed-left {position: absolute; Right: auto; left: expression(eval(document.doc umentelement. scrollleft) ;}< strong>

 

 

 1   <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  2   3   <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >  4   5   < Head  >  6   7   <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"   />  8   9   <  Title  > Implement CSS attributes that support position-fixed in IE6</  Title  >  10   11   <  Style  Type  = "Text/CSS"  >  12   13   * HTML, * html body  {  14   15  Background-Image  :  URL (about: blank)  ;  16   17   Background-Attachment  :  Fixed  ;  18   19   } 20   21   * Html. Fixed  {  22   23   Bottom  :  Auto  ;  24   25   Position  : Absolute  ;  26   27   Right  :  0  ;  28   29   Top  : Expression(eval(document.documentelement.scrolltop+document.doc umentelement. clientHeight-this.offsetHeight-(parseint (this. currentstyle. margintop, 10) | 0)-(parseint (this. currentstyle. marginbottom, 10) | 0 )))  ;  30   31   }  32   33   . Fixed  {  34   35  Bottom  :  0  ;  36   37   Position  :  Fixed  ;  38   39   Right :  0  ;  40   41   }  42   43   </  Style  >  44   45   </  Head  > 46   47   <  Body  >  48   49   <  Div  Style  = "Height: 950px ;"  >  & Nbsp;  </  Div  >  50   51  <  Div  Class  = "Fixed"  > I don't know how you roll it out. </  Div  >  52   53   </  Body  >  54   55   </  Html >