Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to make position:fixed work in IE6. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Let's focus on how to make position:fixed work in IE6. It is well known that IE6 does not support position:fixed, which is as notorious as IE6's double margin and bug that does not support PNG transparency. What are the tricks for position:fixed to work in IE6? please see the following in detail.

How to make position:fixed work in IE6

It is well known that IE6 does not support position:fixed, which is as notorious as IE6's double margin and bug that does not support PNG transparency. I encountered this problem when I was making my own blog template the other day. At that time, I simply ignored IE6--, even though I had a few friends who used IE6 to BS me. But for large projects or commercial websites, if useful to this attribute, it is impossible to directly ignore it.

How do you make position:fixed work in IE6?

The technique used in this article is to use a CSS expression (expression) of InternetExplorer. You cannot use this expression directly because it may not be updated because of the cache.

The easiest way to solve this is to use eval to wrap your statements.

How to solve the problem of "vibration"?

Obviously IE has a multi-step rendering process. When you scroll or resize your browser, it resets everything and redraws the page, which reprocesses the css expression. This causes an ugly "vibrating" bug, where elements in fixed positions need to be adjusted to keep up with your scrolling, so they "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 the CSS before redrawing. Because you are dealing with CSS before redrawing, it will also process your CSS expression before redrawing. This will allow you to achieve smooth fixed position elements!

I didn't provide this plan. I read this somewhere on the Internet. If you know who originally invented this method, please tell the front end to observe. Another tip I found is that you don't need a real picture at all! You can use an about:blank instead of a spacer.gif image, and it works just as well.

CSSCode

/ * make position:fixed available under IE6! * / .fixed-top/* header fixed * / {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 fixed * / {position:fixed;right:0px;left:auto } / * the above is a common method for mainstream browsers except IE6 * / * html,*htmlbody/* corrects IE6 vibration bug*/ {background-image:url (about:blank); background-attachment:fixed;} * html.fixed-top/*IE6 head fixing * / {position:absolute;bottom:auto;top:_expression (eval (document.documentElement.scrollTop));} * html.fixed-right/*IE6 right fixing * / {position:absolute;right:auto Left:_expression (eval (document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt (this.currentStyle.marginLeft,10) | | 0)-(parseInt (this.currentStyle.marginRight,10) | | 0));} * fixed at the bottom of html.fixed-bottom/*IE6 * / {position:absolute;bottom:auto;top:_expression (eval (document. DocumentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight- (parseInt (this.currentStyle.marginTop,10) | | 0)-(parseInt (this.currentStyle.marginBottom,10) | | 0));} * fixed to the left of html.fixed-left/*IE6 * / {position:absolute;right:auto;left:_expression (eval (document.documentElement.scrollLeft));}

Update: add border, padding and margin support!

Note: if you don't need to support margin, you can remove all the `parseInt` parts.

Note: I only tested it in standard mode.

On how to make position:fixed work in IE6 to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.