Let's not talk about anything. Read it first. Code :
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> When position: relative encounters text-align: center </title> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <meta http-equiv =" X-UA-compatible "content =" Ie = emulateie7 "/> <br/> <style type = "text/CSS"> <br/> body {padding: 0; margin: 0 }< br/> # wrap {text-align: center }< br/> # toolbar {width: 100%; Height: 25px; Background: #000; position: fixed; bottom: 0 ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <Div id = "Wrap"> <br/> <div id = "toolbar"> </div> <br/> </body> <br/> </ptml> <br/>
Run code
Run the code in IE7 (or IE8 compatibility mode) and you will find that the toolbar bar at the bottom has only half the width (FF, chrome, and other browsers can parse it normally)
Trigger condition:
1. IE7/IE8 compatibility mode
2. Position: When fixed is located, only bottom or top is written, and right or left is omitted.
3. Position: fixed the outer container uses text-align: Center
Solution:
1. Remove text-align: center from the "outer container" of the element position: fixed, or change it to text-align: left.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> When position: relative encounters text-align: center </title> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <meta http-equiv =" X-UA-compatible "content =" Ie = emulateie7 "/> <br/> <style type = "text/CSS"> <br/> body {padding: 0; margin: 0 }< br/> # wrap {text-align: Left }< br/> # toolbar {width: 100%; Height: 25px; Background: #000; position: fixed; bottom: 0 ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <Div id = "Wrap"> <br/> <div id = "toolbar"> </div> <br/> </body> <br/> </ptml> <br/>
Run code
2. When position: fixed is used, both bottom and right positioning are written completely. Right is missing in the first code.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> When position: relative encounters text-align: center </title> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <meta http-equiv =" X-UA-compatible "content =" Ie = emulateie7 "/> <br/> <style type = "text/CSS"> <br/> body {padding: 0; margin: 0 }< br/> # wrap {text-align: center }< br/> # toolbar {width: 100%; Height: 25px; Background: #000; position: fixed; bottom: 0; right: 0} <br/> </style> <br/> </pead> <br/> <body> <br/> <Div id = "Wrap"> <br/> <Div id = "toolbar"> </div> <br/> </body> <br/> </ptml> <br/>
run the Code
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
