The IE6 browser does not support fixed positioning (position: fixed)

Source: Internet
Author: User

Today, when I was studying, I suddenly found that in the IE6 browser, position: fixed does not work:

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

The above code is opened in IE6 and the effect is as follows:

Other browsers (IE7 +, firefox, opera, safari, and chrome) are displayed normally:

After multiple tests, this problem occurs not only in IE6 but in IE7 and IE8 browsers. If the document is in quirk mode. It is no wonder that when IE7 and 8 use the weird mode, the rendering engine will parse CSS in a rendering mode close to IE6. Finally, I come to the following conclusions:

IE6, IE7 (quirk mode), IE8(Quirk Mode)The browser treats the fixed value of the 'position' feature as an error value. As a result, the default 'position' value is static for fixed positioning elements. That is, this element becomes an element in a normal stream at this time, which will inevitably lead to layout dislocation and other problems.

Solution:

  

In IE6, IE7 (quirk mode), and IE8 (quirk mode), set '_ position: absolute' for the fixed positioning element, and dynamically set its offset through JavaScript scripts or CSS expressions, however, I found that it can only be fixed at the bottom and top. To set a specific location, you must also use _ margin.

Pin the element to the top of the browser:

#top {  _position: absolute;   _bottom: auto;  _top: expression(eval(document.documentElement.scrollTop));}

Fix the element at the bottom of the browser:

#bottom {_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)));}

The two pieces of code can only be implemented at the bottom and top. You can use_marginModify the position of the numeric control element.

You must have thought it was done. NO! There is also a bug: Fixed positioning elements will flash when rolling the scroll bar. To solve this problem, add the following content to the CSS file:

* html{background-image:url(about:blank);background-attachment:fixed;}

Or:

body {_background-attachment:fixed; _background-image:url(about:blank);}

Of course, you can also use javascript to solve the problem, but it is a little tricky:

window.onresize = window.onscroll = function(){    //code};

 

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.