Implement CSS attributes that support position-fixed in IE6 and solve the "vibration" Problem
Source: Internet
Author: User
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. How can I 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 is to use eval to wrap 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 re-render 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 ". To solve this problem, use background-Attachment: fixed to add 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! Another trick I found is that you don't need a real picture at all! You can use an about: blank to replace a spacer.gif image, and it works equally well. CSS code/* Make position: Fixed available in IE6! * // * Fixed the header */. fixed-top {position: fixed; bottom: auto; top: 0px;}/* fixed at the bottom */. fixed-bottom {position: fixed; bottom: 0px; top: auto;}/* fixed on the left */. fixed-left {position: fixed; Right: auto; left: 0px;}/* fixed on the right */. fixed-right {position: fixed; Right: 0px; left: auto ;} /* The above is a common method except for mainstream IE6 browsers * // * corrected IE6 vibration bug */* HTML, * html body {background-image: URL (about: blank); background-Attachment: fixed;}/* IE6 head fixed */* HTML. fixed-top {position: absolute; bottom: auto; top: expression(eval(document.doc umentelement. scrolltop);}/* fixed to the right of IE6 */* HTML. fixed-right {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);}/* fixed at the bottom of IE6 */* HTML. fixed-bottom {position: absolute; bottom: auto; top: expression(eval(document.documentelement.scrolltopdeskdocument.doc umentelement. clientHeight-this.offsetHeight-(parseint (this. currentstyle. margintop, 10) | 0)-(parseint (this. currentstyle. marginbottom, 10) | 0);}/* fixed on the left of IE6 */* HTML. fixed-left {position: absolute; Right: auto; left: expression(eval(document.doc umentelement. scrollleft);} instance Code : <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> Background-image: URL (about: blank ); Background-Attachment: fixed;} * html. Fixed { Bottom: auto; Position: absolute; Right: 0; top: expression(eval(document.documentelement.scrolltop+document.doc umentelement. clientHeight-this.offsetHeight-(parseint (this. currentstyle. margintop, 10) | 0)-(parseint (this. currentstyle. marginbottom, 10) | 0 )));}. fixed { Bottom: 0; Position: fixed; Right: 0 ;}</style>
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
