Expression is compatible with fixed positioning in IE6

Source: Internet
Author: User

This article uses 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 to 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 ".

the trick to solve this problem is to use background-Attachment: fixed adds a background-image: URL (about: blank) 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!
CSS Code :

/* Fix IE6 position: Fixed unavailability bug! * // * 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 position */* HTML. fixed-top {position: absolute; bottom: auto; top: expression(eval(document.doc umentelement. scrolltop);}/* fixed positioning on 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 position 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 position on the left of IE6 */* HTML. fixed-left {position: absolute; Right: auto; left: expression(eval(document.doc umentelement. scrollleft ));}

Contact Us

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.