Cross-browser css fixed positioning {position:fixed}
I do not know if you have noticed, browsing this site, the browser in the bottom right corner of the top of a black right-angled triangle, you can click it to return to the page you are browsing the header. When scrolling the page, its position has not changed any, how do you feel about it? This is done through the CSS positioning attribute {position:fixed}, which allows HTML elements to be detached from the document stream in a browser location.
The implementation code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd >
...
<style type= "Text/css"
#fixed {position:fixed;top:5em;right:0;.} * */
<!–[if IE 6]> for IE7, Opera, and Firefox in the */
</style>
/*ie6 using the container's handling of overflow content
<style type= "Text/css"
Html{overflow:hidden;}
Body{height:100%;overflow:auto;}
#fixed {position:absolute;right:17px;}
the absolute position of the/*fixed element is relative to the HTML element, and the scrollbar is the BODY element, which is the reason for setting right:17px */
</style>
<![ Endif]–>
<!–[if lt IE 6]>
<style type= "Text/css"
#fixed {position:absolute;top:expression ( Eval (Document.body.scrollTop + 50));}
</style>
<![ Endif]–>
<body>
<div id= "wrapper"
...
</div>
<div id= "fixed" ><H2>{POSITION:FIXED}</H2></DIV>
</body>
Code Demo 1(single IE, purely through conditional comments to differentiate IE browser)
Code Demo 2(multiple ie, through conditional annotation +css hack to distinguish IE browser, obviously more complex than pure condition annotation and difficult to read, put up the main is to facilitate the same PC with multiple IE browser friends [generally should do is web development] can directly see the effect, the same below. ）
Maybe someone like me, in! When the DOCTYPE declaration is XHTML1.0 strict or XHTML1.1, it prefers to precede the declaration with an XML Prolog (such as: <?xml version= "1.0" encoding= "Utf-8"?>), But at this time IE7 are in Quriks (compatible) mode, so the hack for IE6 failure, this time you can IE6 also through expression to achieve.
When IE6 is in Quriks mode, IE6 and IE5.5 are almost identical to CSS parsing, so when I see position:fixed for Internet Explorer , I find Quriks in ie6/mode. IE5.5/IE5 Unified CSS Solution:
<?xml version= "1.0" encoding= "Utf-8"?>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en"
"Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
......
<!–[if LT IE 7]>
<style type= "Text/css" >
Body{overflow:hidden;}
#wrapper {Height:100%;overflow:auto;}
#fixed {position:absolute;right:17px;}
</style>
<! [endif]–>
<body>
<div id= "wrapper" >
......
</div>
<div id= "fixed" ></body>
Code Demo 3(single IE, purely through conditional comments to differentiate IE browser)
Code Demo 4(multiple ie, +css hack to differentiate IE browser via conditional annotation)
Compared to two pure CSS hack found that two principles seem to be the same, the HTML elements and body elements of the application and the CSS {position:fixed} support level, but this is actually a hack, basically do not have the universality, know this method can be. What you need to be reminded is that the HTML element in the IE6 standards-compliant mode is always filled with the viewable area of the entire browser, regardless of the height and width given to it, and IE5 and Quirks The HTML element and the BODY element in the mode all the wide-height settings are ignored and remain full of the viewer's viewable area, see "HTML Elements in IE" for more information
Some might think that the XML prolog can now be introduced with a pure CSS method to solve the problem below IE7, which is cool, but with XML Prolog suddenly found IE6 in quriks mode, Previously in the standards-compliant mode of the design and deformation, oh, this is what we do IE's fate.
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
