Home >Web Front-end >JS Tutorial >js perfectly solves the bug_javascript technique of IE6 not supporting position:fixed

js perfectly solves the bug_javascript technique of IE6 not supporting position:fixed

WBOYOriginal: 2016-05-16 16:02:381378browse

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 very common on the Internet. It achieves the position:fixed effect under IE6 by setting html{overflow:hidden} and body{height:100%;overflow:auto}. However, this method has a flaw. That is: this will make the original absolute and relation on the page become fixed effects. I will not do a demo here. If you have any 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 a CSS expression in Internet Explorer. The css code is as follows:

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6浏览器的特有方法 */
* 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 you want an element to be 10 pixels from the top and 10 pixels from the left, then you need to do this Zi wrote:

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:10px;top:10px}
/* IE6浏览器的特有方法 */
* 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. However, there is still a problem, that is, suspended elements will vibrate

IE has a multi-step rendering process. When you scroll or resize your browser, it resets everything and redraws the page, at which point it reprocesses the CSS expressions. This can cause an ugly "vibration" bug, where fixed-position elements need to adjust to keep up with your scrolling (of the page), and thus "jump".
The trick to solve 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 repainting. Because it processes CSS before repainting, it will also process your CSS expressions first before repainting. This will allow you to achieve perfectly smooth fixed position elements!
Then I found that background-image does not need a real picture, just set it to about:blank.

The complete code is attached below

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6浏览器的特有方法 */
/* 修正IE6振动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 content of this article, I hope you all like it.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 setCutomValidity() function validation form example sharing_javascript skillsNext article：HTML5 setCutomValidity() function validation form example sharing_javascript skills

See more

js perfectly solves the bug_javascript technique of IE6 not supporting position:fixed

Related articles