From: http://www.wxwdesign.cn/article/skills/ie6_position_fixed_debug.htm
When creating a pageFixed at a location on the webpageWhen the scroll bar is pulled, the content remains unchanged from the browser ". Example:
<! 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">
RunCodeAnd found that in Firefox, ie7.0, opera and other browsers, the effect is normal, but in IE6, the content originally to be fixed has fallen to the "test content ........ IE6 does not support"Position: fixed;There are two solutions to this bug: CSS and Js.
The following describes the CSS solution:
HTML {overflow: hidden ;}
HTML 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"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "/> <style type =" text/CSS "> body {margin: 0px; padding: 0px; font-size: 12px; line-Height: 22px ;} P {margin: 0px; padding: 36px ;}. fixed {position: fixed; Right: 60px; top: 100px; Border: #666666 3px solid; Background-color: # cccccc; padding: 26px ;}</style> <! -- [If IE 6]> <style type = "text/CSS"> HTML {overflow: hidden;} body {Height: 100%; overflow: auto ;}. fixed {position: absolute ;}</style> <! [Endif] --> <title> position_fixed test </title> </pead> <body> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <Div class = "fixed"> my location is fixed! Pull the scroll bar to see the effect. </Div> </body> </ptml>
Body {Height: 100%; overflow: auto ;}
The fixed content {position: absolute;} is:. Fixed {position: absolute ;}
[Ctrl + A select all tips: you can modify some code and then press run]
Test again and find that IE6 can also be fixed,It seems that the bug has been solved, but a new bug has emerged.If your webpage has two floating contents at the same time, you will find a new bug. Example:
HTML 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"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "/> <style type =" text/CSS "> body {margin: 0px; padding: 0px; font-size: 12px; line-Height: 22px ;} P {margin: 0px; padding: 36px ;}. float2 {position: absolute; padding: 26px; Borde R: #999999 3px solid; Background-color: # 3399ff; Right: 200px; top: 200px ;}. fixed {position: fixed; Right: 60px; top: 100px; Border: #666666 3px solid; Background-color: # cccccc; padding: 26px ;}</style> <! -- [If IE 6]> <style type = "text/CSS"> HTML {overflow: hidden;} body {Height: 100%; overflow: auto ;}. fixed {position: absolute ;}</style> <! [Endif] --> <title> position_fixed test </title> </pead> <body> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <Div class = "float2"> floating content 2 </div> <Div class = "fix Ed "> my location is fixed! Pull the scroll bar to see the effect. </Div> </body> </ptml>
[Ctrl + A select all tips: you can modify some code and then press run]
Added. Float2 {position: absolute ;}As a result, IE6 is faulty, and the position of float2 becomes fixed. The original absolute cannot be implemented. It seems that the CSS solution is not perfect.
Solution 2: Javascript
VaR n = 100; // top Value
VaR OBJ = Document. getelementbyid ("fixed"); // position: fixed object
Window. onscroll = function () {obj. style. Top = (document. Body. scrolltop | document.doc umentelement. scrolltop) + N + 'px ';}
Window. onresize = function () {obj. style. Top = (document. Body. scrolltop | document.doc umentelement. scrolltop) + N + 'px ';}
Example:
HTML 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"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "/> <style type =" text/CSS "> body {margin: 0px; padding: 0px; font-size: 12px; line-Height: 22px ;} P {margin: 0px; padding: 36px ;}. float2 {position: absolute; padding: 26px; Borde R: #999999 3px solid; Background-color: # 3399ff; Right: 200px; top: 200px ;}. fixed {position: absolute; Right: 60px; top: 100px; Border: #666666 3px solid; Background-color: # cccccc; padding: 26px ;} </style> <script language = "JavaScript" type = "text/JavaScript"> window. onload = function () {var n = 100; // top value var OBJ = document. getelementbyid ("fixed"); // position: fixed object window. onscroll = function () {obj. style. top = (document. Body. scrolltop | document.doc umentelement. scrolltop) + N + 'px ';} window. onresize = function () {obj. style. top = (document. body. scrolltop | document.doc umentelement. scrolltop) + N + 'px ';}} </SCRIPT> <title> position_fixed test </title> </pead> <body> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ....... .. </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <Div class = "float2"> floating content 2 </div> <Div class = "fixed" id = "fixed"> my position is fixed! Pull the scroll bar to see the effect. </Div> </body> </ptml>
[Ctrl + A select all tips: you can modify some code and then press run]
After running the results, it is found that everything is normal. The only drawback is that the fixed block content will flash a little during the pull of the scroll bar. However, compared with CSS, it may cause new bugs. The javascript solution seems more satisfactory.
An example with fixed content in the lower right corner is attached:
HTML 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"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = UTF-8 "/> <style type =" text/CSS "> body {margin: 0px; padding: 0px; font-size: 12px; line-Height: 22px ;} P {margin: 0px; padding: 36px ;}. float2 {position: absolute; padding: 26px; Borde R: #999999 3px solid; Background-color: # 3399ff; Right: 200px; top: 200px ;}. fixed {position: absolute; Right: 0px; bottom: 0px; Border: #666666 3px solid; Background-color: # cccccc; padding: 26px; Height: 26px ;} </style> <script language = "JavaScript" type = "text/JavaScript"> window. onload = function () {var OBJ = document. getelementbyid ("fixed"); // position: fixed object var n1_document.doc umentelement. clientHeight-obj.offset Height; // top value window. onscroll = function () {obj. style. top = (document. body. scrolltop | document.doc umentelement. scrolltop) + N + 'px ';} window. onresize = function () {obj. style. top = (document. body. scrolltop | document.doc umentelement. scrolltop) + N + 'px ';}} </SCRIPT> <title> position_fixed test </title> </pead> <body> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content... ...... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <p> test content ......... </P> <Div class = "float2"> floating content 2 </div> <Div class = "fixed" id = "fixed"> my position is fixed! Pull the scroll bar to see the effect. </Div> </body> </ptml>
[Ctrl + A select all tips: you can modify some code and then press run]
There is also a solution on the Internet: CSS expression
. Fixed {
Position: absolute;
Clear: both;
Top: expression (eval (document. compatmode &&
Document. compatmode = 'css1compat ')?
Documentelement. scrolltop
+ (Documentelement. clientHeight-this.clientHeight)-1
: Document. Body. scrolltop
+ (Document. Body. clientHeight-this.clientHeight)-1 );
}
The problem with CSS expression is that it consumes a lot of memory. Originally, CSS is the control performance, and the behavior should be managed by JavaScript to allow CSS to manage the behavior. This method is obviously not suitable and is not recommended.
Some may say that JavaScript is not as compatible with CSS, but I recommend the Javascript solution for IE6 BUG:
If some users use IE6 and their browsers do not support JavaScript, they will see position: absolute. This effect does not affect user usage, but the position will not follow the scroll bar, it has little impact on the overall user experience of webpages. In addition, IE7, IE8, Firefox, and other users are not affected,Only IE6 users who do not support JavaScript will be affected. This result is exactly what we want..
For all front-end staff, IE6 has been plagued by its bugs for a long time (including the issue of PNG opacity). the extinction of IE6 acceleration is the voice of many front-end staff, to force Internet Explorer 6 users to upgrade to Internet Explorer 7, it can be said that many people are already working hard (if you use Internet Explorer 6 to access this website, you will be prompted to upgrade your browser ). Therefore, for IE6 bugs, if they do not have a major impact on the overall situation, I will keep the bugs to users if allowed. If you do this, when you use IE6 to access the Internet, if the content is not perfect (or even unavailable) everywhere, then the user will naturally upgrade the browser, and the Internet Explorer 6 will be extinct and will be available in just a few days.
Of course, for better compatibility and work needs, sometimes we have to make compromises, compromise with users, compromise with IE6, and compromise against non-standard ones. Who makes us work for others!
For the above problems, there is a better solution on the internet, pure CSS implementation, no flashing, the effect is very good:
HTML 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"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> untitled document </title> <style type =" text/CSS "> * {margin: 0px; padding: 0px ;} body {background-image: URL (http://global.tianya.cn/global/gnav/css/nothing.txt); background-Attachment: fixed;/* prevent screen flash in IE6 */} # topnavwrapper {width: 980px; text-align: left; height: 31px; margin: 0px auto; Z-index: 100; _ Position: relative; _ top: 0px ;}# topnav {width: 980px; float: Left; display: block; Z-index: 100; overflow: visible; position: fixed; top: 0px;/* position fixed for IE6 */_ Position: absolute; _ top: expression (documentelement. scrolltop + "PX"); background-image: URL (http://global.tianya.cn/global/gnav/images/top_r.gif); background-repeat: No-Repeat; Background-position: Right; Height: 31px ;}. show {position: absolute; top: 500px; left: 400px; Border: # ff0000 1px solid ;} </style> </pead> <body> <Div id = "topnavwrapper"> <ul class = "jd_menu" id = "topnav"> </ul> </div> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <Div class = "show"> show </div> </body> </ptml>
[Ctrl + A select all tips: you can modify some code and then press run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
