Home > Web Front-end > JS Tutorial > body text

Analysis of getBoundingClientRect in various commonly used browsers_javascript skills

WBOY
Release: 2016-05-16 18:52:46
Original
1364 people have browsed it

First go to the test code

Copy the code The code is as follows:




Management System




<SCRIPT> <br>alert(document.getElementById("w3124").getBoundingClientRect().top ); <br></SCRIPT>



The following are the alert results
IE, FF, Chrome: 208
Maxthon of IE kernel: 215
TheWorld of IE kernel: 217
When the body is added with margin: 0; padding: 0, IE, FF, Chrome and Maxthon are all 200, but only TheWorld is 202
Then when the DOCTYPE statement in the header of the HTML code is removed, the values ​​of FF, Chrome, and Maxthon are all 200, and because IE enters Quirks mode, the value at this time is 202, while TheWorld is still 202
Conclusion
FF, Chrome, and Maxthon always adhere to the Standards Mode (Standards Mode). IE also enters the Standards Mode (Standards Mode) after adding a statement. Only TheWorld always adheres to the Quirks Mode. It's evil!
Suggestion
For compatibility, add margin:0;padding:0 to the body, and pay attention to adding the DOCTYPE statement (with it, IE is quite obedient)
Another:
1. Use green hope throughout the article Everyone can relax their eyes.
2. This is my first time posting a blog. My heart is fragile and I cannot withstand all kinds of blows. If there is anything wrong, please correct me. I will correct it humbly. Please be gentle, thank you
3. References
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template