Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der HTML-Dokumenttypen Empfohlene_HTML/Xhtml_Webseitenproduktion
Meins ist:
Blog Park:
Informationen zur HTML-Dokumenttypreferenz: http://i.wanz.im/2010/05/28/why_doctype_html/
Ich habe nachgesehen und festgestellt, dass es einen Unterschied zwischen der von JS erhaltenen visuellen Größe der aktuellen Seite und der Bildlaufposition der Seite gibt!
Die Seite enthält ein 2000*2000 DIV. Die von IE und Chrome für verschiedene HTML-Dokumenttypen zusammengestellten Daten sind wie folgt:
Standard:
Spezial:
Wenn der HTML-Dokumenttyp nicht zu HTML hinzugefügt wird, wird standardmäßig der Spezialmodus verwendet!
Chrome标准 | Chrome特殊 | IE标准 | IE特殊 | |
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 |
Analyse:
Gesamtseitenbreite: document.body.scrollWidth;
Gesamtseitenhöhe: document.body.scrollHeight;
Chrome-Seitenposition: document.body.scrollTop; document.body.scrollLeft;
Chrome-Standard Sichtbarer Bereich der Seite: document.documentElement.clientWidth; document.documentElement.clientHeight;
Sichtbarer Bereich der Chrome-Spezialseite: document.body.clientWidth;
IE-Standardseitenposition: document.documentElement .scrollTop ; document.documentElement.scrollLeft;
IE-Standardseite sichtbarer Bereich: document.documentElement.clientWidth;
IE-Sonderseitenposition: document.body.scrollTop;
Sichtbarer Bereich der IE-Sonderseite: document.body.clientWidth; document.body.clientHeight;
Der JS-Code lautet wie folgt: