Position: fixed
Solution: <! 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"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> untitled document </title> <Style type = "text/css"> <! -- Body {margin: 0; padding: 0} P {height: 50px} Html {_ overflow: hidden} Body {_ overflow: auto; _ height: 100%} . Fixed {padding: 10px; background: #000; left: 0px; color: # fff; position: fixed; top: 0; _ position: absolute} --> </Style> <Body> <P> Begin </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> This is to increase the height. </P> <P> end </P> </div> <Div class = Fixed> position: fixed; I am always in the upper left corner of the screen </div> </Body> </Html> |
Invalid style after Chinese annotation
If the following conditions are met, the following style cannot be commented out: 1. CSS has Chinese comments 2. CSS is ANSI encoded 3. html is UTF-8 encodedSolution: 1. Remove Chinese comments and use English comments 2. Unified css and html Encoding |
Text overflow caused by comments
<! 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"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/> <Title> An additional pig </title> </Head> <Body> <Div style = "width: 400px"> <Div style = "float: Left"> </div> <! -- _ --> <Div style = "float: Right; width: 400px"> This is the extra pig. </div> </Div> </Body> </Html>
Check IE6 and you will find an extra "pig "! Text overflow caused by comments. This is a bug in IE6. Do not place comments. The simplest and quickest solution; 2. Do not place comments between two floating blocks; 3. Include text blocks between New <div> </div>, for example, <Div style = "float: Right; width: 400px "> <div> pull this is the extra pig </div>; 4. Remove the fixed width of the text block, which is similar to 3; 5. Add a <br/> or space to the backend. (not recommended) 6. Use the IE annotation format, such as: <! -- [If! IE]> put your commentary in here... <! [Endif] --> 7. Add position: relative to the box; Attribute |
Odd width
The solution is to change the externally positioned div width to an even number. |