Maison > Article > interface Web > Explication détaillée des types de documents HTML Recommandé_HTML/Xhtml_Production de pages Web
Le mien est :
Blog Park :
À propos de la référence du type de document HTML : http://i.wanz.im/2010/05/28/why_doctype_html/
J'ai vérifié et constaté qu'il y a une différence entre la taille visuelle de la page actuelle obtenue par JS et la position de défilement de la page !
La page contient un DIV 2000*2000. Les données compilées par IE et Chrome sur différents types de documents HTML sont les suivantes :
Standard :
Spécial :
Lorsque le type de document HTML n'est pas ajouté au HTML, il est par défaut en mode spécial !
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 :
Largeur totale de la page : document.body.scrollWidth ;
Hauteur totale de la page : document.body.scrollHeight;
Position de la page Chrome : document.body.scrollTop ; document.body.scrollLeft;
Norme Chrome Zone visible de la page : document.documentElement.clientWidth; document.documentElement.clientHeight;
Zone visible de la page spéciale Chrome : document.body.clientWidth; document.body.clientHeight;
Position de la page standard IE : document.documentElement .scrollTop ; document.documentElement.scrollLeft;
Zone visible de la page standard IE : document.documentElement.clientWidth; document.documentElement.clientHeight;
Position de la page spéciale IE : document.body.scrollTop; >Zone visible de la page spéciale IE : document.body.clientWidth; document.body.clientHeight;
Le code JS est le suivant :