Of Stack

js perfect solution IE6 does not support position:fixed bug

  • 2020-06-01 08:12:39
  • OfStack

Let's look at the 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 common on the web by setting html{overflow:hidden} and body{height:100%; overflow:auto} to achieve ie6 position:fixed effect, but this method has a defect, that is: it will make the original absolute, relation into fixed effect, here I will not do demo, if you have doubts, you can go to test 1.

So I looked for the following information and found that the position:fixed effect under ie6 can be perfectly realized through one Internet Explorer CSS expression (expression). The css code is as follows: 


/*  In addition to IE6 The browser's general approach  */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6 Browser-specific methods  */
* 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 suspension margin of an element, you should set it twice. For example, if I want an element to be 10 pixels away from the top and 10 pixels away from the left, you should write it like this: 


/*  In addition to IE6 The browser's general approach  */
.ie6fixedTL{position:fixed;left:10px;top:10px}
/* IE6 Browser-specific methods  */
* 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 it will not affect other absolute and relation, but there is still one problem, that is, the suspended element will vibrate

IE has a multi-step rendering process. When you scroll or resize your browser, it will reset everything and redraw the page, at which point it will reprocess the css expression. This causes an ugly "vibration" bug, where elements that are fixed in place need to be adjusted to keep up with your scrolling, so they "jump".
The trick is to add an background-image element to the body or html element using background-attachment :fixed. This forces the page to process CSS before redrawing. Because it is processing 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 background-image doesn't need a real picture, just about:blank.

The full code is attached below 


/*  In addition to IE6 The browser's general approach  */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6 Browser-specific methods  */
/*  correction 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)))}

That's all for this article, I hope you enjoy it.

Related articles: