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};