IE6 browser Position: fixed is not supported. IE7/8/9, Firefox, Chrome and other browsers all support fixed positioning. How to solve this problem?
Method 1:
For ie6, hack is written. Other browsers still use the position: fixed attribute. Use position: absolute positioning to solve the problem. Construct a scroll bar that contains the content of the document (it can be a body or a div). Position: absolute. It is separated from the whole document flow, and is not relative to the document contained by the scroll bar, but should contain the upper level elements of the document.
Method 2:
Fully use position: absolute to solve the fixed positioning problem. Because other browsers support absolute positioning. The browsers used in the test: IE6/7/8/9, Firefox, Chrome, Safari.
Method 3: Preview the following code first
<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;right:30px;top:120px} </style> <!-- [if IE 6]> <style type="text/css"> html{overflow:hidden} body{height:100%;overflow:auto} #gs{position:absolute} </style> <! [endif]--> </head> <body> <div id="rightform"> <p>11111111111111111</p> <input id="gs" name="gs" type="text" value="" /> </div> </body> </html>
The above code is very common on the Internet. The position: fixed effect under ie6 is achieved by setting html {overflow: hidden} and body {height: 100%; overflow: auto}. However, there is a defect in this method, which is that it will make the original absolute and relationship on the page become fixed effects. I will not do the demo here. If you have doubts, you can try it yourself.
So I searched for information and found that the position: fixed effect under ie6 can be perfectly realized through an Internet Explorer CSS expression. The css code is as follows:
/*Common methods other than IE6 browsers*/ .ie6fixedTL{position:fixed;left:0;top:0} .ie6fixedBR{position:fixed;right:0;bottom:0} /*Unique methods of IE6 browser*/ * 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 code can be used directly. If you want to set the floating margin of an element, you need to set it twice. For example, if I want an element to be 10 pixels from the top and 10 pixels from the left, I should write it like this:
/*Common methods other than IE6 browsers*/ .ie6fixedTL{position:fixed;left:10px;top:10px} /*Unique methods of IE6 browser*/ * html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft+10));top:expression(eval(document.documentElement.scrollTop+10))}
In this way, the effect of position: fixed under IE6 is solved, and other absolute and relationship will not be affected. However, there is another problem that suspended elements will vibrate. IE has a multi-step rendering process. When you scroll or resize your browser, it will reset all the content and redraw the page. At this time, it will reprocess the css expression. This will cause an ugly "vibration" bug. The elements in the fixed position here need to be adjusted to keep up with your (page's) scrolling, so they will "jump".
The trick to solve this problem is to use background attachment: fixed to add a background image to the body or html element. This forces the page to process CSS before redrawing. Because it processes CSS before redrawing, it will also process your CSS expression before redrawing. This will allow you to achieve perfect smooth fixed position elements!
Then I found that the background image does not need a real picture, and it can be set to about: blank. The complete code is attached below:
/*Common methods other than IE6 browsers*/ .ie6fixedTL{position:fixed;left:0;top:0} .ie6fixedBR{position:fixed;right:0;bottom:0} /*Unique methods of IE6 browser*/ /*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)))}
