CSS compatibility considerations-how to fix the position with CSS

Sometimes we need to fix a div to a specified position on the screen, such as when loading status bar is used or when the number of online users is displayed. You need to display the DIV in the middle, top, or bottom left of the webpage. No matter how the scroll bar is pulled, The DIV will always be in the same relative position. These requirements can be easily implemented using CSS. You only need to use the position: fixed parameter to describe them. And position: fixed; Parallel description languages include position: absolute; position: relative; position: static; here we mainly talk about the difference between fixed and absolute. Fixed indicates that it is always in the sameScreenEven if you pull the scroll bar, it is still displayed in the relative position of the screen, while absolute is different. Absolute describes the location of the webpage, therefore, after pulling the scroll bar, the DIV shown in the middle may be pulled to the top. Therefore, the following section of CSS will place the DIVScreenCentral:

(Show/hide) plain text

1. # Loadingstatus {
2. Position: fixed;
3. Top: 100px;/* always 100px from the screen height */

 

/* The following description is not related to the position. Therefore, follow the previous description in the following example */
Width: 220px; Height: 20px;
Left: 50%;
Margin: 0 0 0-110px;/* Push the DIV to the left end to half the length so that it can be displayed in the real middle */
Border: 1px solid red;
}
If you use this CSS to do the experiment, I believeMajorityFriends cannot see the expected results, because you are using IE, the browser that does not fully support W3 standards. If you are using Firefox, there should be no problem. However, we have to admit that, after all, Internet Explorer occupies a vast majority of the market, so we must write CSS compatible with Internet Explorer. Since IE does not support fixed, you can write different CSS for IE and FF, for example:

(Show/hide) plain text

1. Div # loadingstatus {position: absolute; left: 0px; top: 0px ;}
2. Body> Div # loadingstatus {position: fixed;/* This description is not known by IE, so it is valid for other browsers */}

The aboveCodeSolve the compatibility problem, but the DIV in IE still cannot be fixed inScreenSo we only have a trick, that is to write compatible CSS, the Code is as follows (the legend shows that the CSS expression appears ):

(Show/hide) plain text

1.  
2. Div # loadingstatus {
3. Left: 50%;
4. Top: expression (document. Body. scrolltop + 100 + 'px ');/* calculate the webpage location corresponding to the current screen Location Based on the Expression */
5. }
6. Body> Div # loadingstatus {position: fixed; left: 0px; top: 100px ;}

This seems to be perfect, and we should be able to get the results we need. If you don't believe it, try it yourself. Sorry, you are disappointed. This still doesn't work, because when we pull the scroll bar, the expressions in the CSS for IE went on strike, only when the page was loaded, I will not work in the future. How can this be done? Don't worry, it's just a bug in IE. We just need to assign the expression value to a variable, and this problem will be solved, so the following CSS will work properly:

Margin: 0 0 0-110px;
Width: 220px; Height: 19px;
Left: 50%;
Text-align: center;
Border: 1px solid red;

}Rendering...# Loadingstatus {
Position: fixed! Important;/* important for FF, so that the position description later will be useless */
Position: absolute;/* for IE */
Top: 100px;
Top: expression (100 + (novalue = document.doc umentelement. scrolltop? Document.doc umentelement. scrolltop: Document. Body. scrolltop) + 'px ');
/* The above expression is for IE, FF does not know this expression, so the top value is 100px */

 

Margin: 0 0 0-110px;
Width: 220px; Height: 19px;
Left: 50%;
Text-align: center;
Border: 1px solid red;

}

(Show/hide) plain text

2. # Loadingstatus {
4. Position: fixed! Important;/* important for FF, so that the position description later will be useless */
6. Position: absolute;/* for IE */
8. Top: 100px;
10. Top: expression (100 + (novalue = document.doc umentelement. scrolltop? Document.doc umentelement. scrolltop: Document. Body. scrolltop) + 'px ');
12. /* The above expression is for IE, FF does not know this expression, so the top value is 100px */
14. Margin: 0 0 0-110px;
16. Width: 220px; Height: 19px;
18. Left: 50%;
20. Text-align: center;
22. Border: 1px solid red;
24. }

 

how to fix the DIV in the upper left or lower right corner? The following shows the CSS code. You can see it by yourself:
Div # loadingstatus {
/* ie5.5 +/win-this is more specianthan the IE 5.0 version */
right: auto; bottom: auto;
left: expression (-20-fixme. offsetwidth + (document.doc umentelement. clientwidth? Document.doc umentelement. clientwidth: Document. Body. clientwidth) + (novalue2 = document.doc umentelement. scrollleft? Document.doc umentelement. scrollleft: Document. Body. scrollleft) + 'px ');
top: expression (-10-fixme. offsetheight + (document.doc umentelement. clientheight? Document.doc umentelement. clientheight: Document. Body. clientheight) + (novalue = document.doc umentelement. scrolltop? Document.doc umentelement. scrolltop: document. body. scrolltop) + 'px ');
}< br> I forgot to give the case, or some friends have some comments. For details about the case, see the attachment: fix.html

.