Home > Developer > JavaScript
Test the code first.
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Management System </title>
</Head>
<Body style = "" onselectstart = "return false;"> <! -- 7699c7 -->
<Div id = "w3124" style = "border: 1px solid # ff0000; position: relative; top: 200px; left: 400px; width: 400px;">
</Div>
<SCRIPT>
Alert (document. getElementById ("w3124"). getBoundingClientRect (). top );
</SCRIPT>
</Body>
</Html>
The following is the alert result.
IE, FF, Chrome: 208
Maxthon: 215 of the IE Kernel
IE kernel TheWorld: 217
When the body is added with margin: 0; padding: 0, all values in IE, FF, Chrome, and Maxthon are 200, and only TheWorld is 202.
Then, when the DOCTYPE declaration in the HTML code header is removed, the FF, Chrome, and Maxthon values are all 200, while the IE value is 202 because it enters the Quirks mode, and TheWorld is still 202.
Conclusion
FF, Chrome, and Maxthon always stick to the standard Mode. IE also enters the standard Mode after the declaration is added. Only TheWorld always sticks to the Quirks Mode!
Suggestions
Add margin: 0; padding: 0 to the body for compatibility. Pay attention to the DOCTYPE Statement (IE is quite obedient with it)
In addition:
1. I hope everyone can relax with green.
2. The younger brother posted a blog for the first time. His mind is weak and he cannot bear all kinds of attacks. If anything is wrong, please correct me. I must make some mistakes modestly. Please take it lightly. Thank you.
3. References
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
