Detailed explanation of HTML document types

Detailed explanation of HTML document types

Mine is: <!DOCTYPE html>

Blog Garden: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

For more information about HTML document types, please visit: http://i.wanz.im/2010/05/28/why_doctype_html/

After checking, I found that JS was getting the visible size of the current page, which was different from the scroll position of the page!
The page contains a 2000*2000 DIV. The data of IE and Chrome test in different HTML document types are as follows:
Standard: <!DOCTYPE html>
Special: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

When the HTML doctype is not added to the HTML, it defaults to a special mode!

Chrome Standards Chrome Specific IE Standards IE Special
document.body.clientTop; 0 0 0 2
document.body.clientLeft; 0 0 0 2
document.body.clientWidth; 473 473 471 471
document.body.clientHeight; 2000 625 2000 604
document.body.scrollTop; 224 289 0 255
document.body.scrollLeft; 315 388 0 278
document.body.scrollWidth; 2005 2005 2005 2010
document.body.scrollHeight; 2010 2010 2000 2005
document.body.offsetTop; 0 0 0 0
document.body.offsetLeft; 0 0 0 0
document.body.offsetWidth; 473 473 471 492
document.body.offsetHeight; 2000 2000 2000 625
document.documentElement.clientTop; 0 0 0 0
document.documentElement.clientLeft; 0 0 0 0
document.documentElement.clientWidth; 473 473 471 0
document.documentElement.clientHeight; 625 2010 604 0
document.documentElement.scrollTop; 0 0 199 0
document.documentElement.scrollLeft; 0 0 241 0
document.documentElement.scrollWidth; 2005 2005 2005 492
document.documentElement.scrollHeight; 2010 2010 2010 625
document.documentElement.offsetTop; 0 0 0 0
document.documentElement.offsetLeft; 0 0 0 0
document.documentElement.offsetWidth; 473 473 492 492
document.documentElement.offsetHeight; 2010 2010 625 625

analyze:

Total page width: document.body.scrollWidth;
Total page height: document.body.scrollHeight;
Chrome page position: document.body.scrollTop; document.body.scrollLeft;
Chrome standard page visible area: document.documentElement.clientWidth; document.documentElement.clientHeight;
Chrome special page visible area: document.body.clientWidth; document.body.clientHeight;
IE standard page position: document.documentElement.scrollTop; document.documentElement.scrollLeft;
IE standard page visible area: document.documentElement.clientWidth; document.documentElement.clientHeight;
IE special page position: document.body.scrollTop; document.body.scrollLeft;
IE special page visible area: document.body.clientWidth; document.body.clientHeight;
The JS code is as follows:

Copy code
The code is as follows:

function getSize() {
var obj = new Object();
obj.allWidth = document.body.scrollWidth;
obj.allHeight = document.body.scrollHeight;
if (-[1, ]) { //non-IE
obj.top = document.body.scrollTop;
obj.left = document.body.scrollLeft;
if (document.compatMode === 'CSS1Compat') {
obj.width = document.documentElement.clientWidth;
obj.height = document.documentElement.clientHeight;
}
else {
obj.width = document.body.clientWidth;
obj.height = document.body.clientHeight;
}
} else {
if (document.compatMode === 'CSS1Compat') {
obj.width = document.documentElement.clientWidth;
obj.height = document.documentElement.clientHeight;
obj.top = document.documentElement.scrollTop;
obj.left = document.documentElement.scrollLeft;
}
else {
obj.width = document.body.clientWidth;
obj.height = document.body.clientHeight;
obj.top = document.body.scrollTop;
obj.left = document.body.scrollLeft;
}
}
alert(obj.top);
alert(obj.left);
alert(obj.width);
alert(obj.height);
return obj;
}

Note: The HTML document type of the blog garden homepage is found to be:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Why is it different from the essay display page?

Welcome to reprint, please indicate: Reprinted from [ http://www.cnblogs.com/zjfree/ ]

<<:  Tips on HTML formatting and long files for web design

>>:  How to set up cross-domain access in IIS web.config

Recommend

Vue implements card flip carousel display

Vue card flip carousel display, while switching d...

How to access the local machine (host machine) in Docker

Question How to access the local database in Dock...

Solution to the problem that the MySQL database cannot be accessed by other IP addresses

Preface Still referring to the project mentioned ...

How to use Docker to build OpenLDAP+phpLDAPadmin unified user authentication

1. Background Use LDAP to centrally manage operat...

Six methods for nginx optimization

1. Optimize Nginx concurrency [root@proxy ~]# ab ...

Solve the problem that element edit form el-radio cannot be selected after echoing

Table of contents Preface question Online solutio...

Use shell script to install python3.8 environment in CentOS7 (recommended)

One-click execution To install Python 3.8 in a vi...

MySQL 5.7.33 installation process detailed illustration

Table of contents Installation package download I...

MySQL exposes Riddle vulnerability that can cause username and password leakage

The Riddle vulnerability targeting MySQL versions...

MySQL 5.7.30 Installation and Upgrade Issues Detailed Tutorial

wedge Because the MySQL version installed on the ...

Summary of the top ten problems of MySQL index failure

Table of contents background 1. The query conditi...

Detailed explanation of how MySQL determines whether an InnoDB table is an independent tablespace or a shared tablespace

Preface InnoDB stores data in tablespaces. In the...

A simple method to regularly delete expired data records in MySQL

1. After connecting and logging in to MySQL, firs...

How to solve nginx 503 Service Temporarily Unavailable

Recently, after refreshing the website, 503 Servi...

How to install FastDFS in Docker

Pull the image docker pull season/fastdfs:1.2 Sta...