Web Design tips: CSS fixed positioning across browsers

Source: Internet
Author: User
Tags comments expression version wrapper xmlns
css| Skills | browser | design | Web page design

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.

    1. IE7, Firefox, Opera, all support the CSS {position:fixed}, so it is easy to achieve ("detailed positioning and positioning application")
    2. IE6 does not support this property, but it is in use! DOCTYPE declaration specifies that standards-compliant (standard) mode can be implemented through CSS hack
    3. Under the above statement IE5 and IE5.5 currently do not find a solution via pure CSS, but can be implemented in CSS via IE-specific expression (fixed elements move when the page is moved). This is the same as the common floating logo ads using JavaScript implementation principle, but can be directly written in the CSS easier
    4. The use of IE unique conditional annotation statements can be set for different IE version of the exact settings, while avoiding the code is read by other browsers, personally think than the pure CSS hack good, if you have installed more than one IE (including green version), conditional comments will be the highest version of IE as the standard.

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.



Related Article

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.