[CSS]-fixed the bug where IE6 does not support position: fixed.

ArticleDirectory

• How do you make position: fixed work in IE6?
• How can we solve the "vibration" problem?

Source: http://www.qianduan.net/fix-ie6-dont-support-position-fixed-bug.html

Original article: http://subtlegradient.com/articles/2009/07/29/css_position_fixed_for_ie6.html

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. I encountered this problem when I made my blog template the other day. At that time, I simply ignored IE6, even though several friends who used IE6, BS, and I ...... However, it is impossible for large projects or commercial websites to directly ignore this attribute.

 

How do you 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 problem is to useEvalWrap 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 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 ".

The skill to solve this problem is to useBackground-Attachment: fixedAdd 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!

This solution is not provided by me. I read this online somewhere. If you know who created this method, please tell the front-end to observe.

Another trick I found is that you don't need a real picture at all! You can useAbout: blankReplace a spacer.gif image, and it works equally well.

 <Style type = "text/CSS">
  /*  Make position: Fixed available under IE6!  */   
. Fixed-top  /*  Head Fixation  */    {  
Position  :  Fixed  ;  
Bottom  :  Auto  ;  
Top  :  0px  ;  
  }  
. Fixed-bottom  /* Bottom fixed  */     {  
Position  :  Fixed  ;  
Bottom  :  0px  ;  
Top  :  Auto  ;  
  } 
. Fixed-left  /*  Left fixed  */     {  
Position  :  Fixed  ;  
Right  :  Auto  ;  
Left  :  0px ;  
  }  
. Fixed-Right  /*  Right side fixed  */     {  
Position  :  Fixed  ;  
Right  :  0px  ; 
Left  :  Auto  ;  
  }     
  /*  The above is a common method except for mainstream browsers in IE6.  */  
* HTML, * html body  /*  Corrected IE6 vibration bug  */     {  
Background-Image :  URL (about: blank)  ;  
Background-Attachment  :  Fixed  ;  
  }  
* Html. Fixed-top  /*  Fixed IE6 head  */     {  
Position  : Absolute  ;  
Bottom  :  Auto  ;  
Top  :  Expression(eval(document.doc umentelement. scrolltop ))  ;  
  }  
* Html. Fixed-Right  /*  Fixed on the right side of IE6  */    {  
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 ))  ; 
  }  
* Html. Fixed-bottom  /*  Fixed at the bottom of IE6  */     {  
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 )))  ;  
  }  
* Html. Fixed-left  /*  Fixed on the left side of IE6  */     {  
Position  :  Absolute ;  
Right  :  Auto  ;  
Left  :  Expression(eval(document.doc umentelement. scrollleft ))  ;  
  }  
</Style> 

Note: expression should be used as little as possible, or even less. Why do you need to access Baidu on your own.