web-dev-qa-db-fra.com

clientHeight / clientWidth renvoyant différentes valeurs sur différents navigateurs

Propriétés document.body.clientHeight et document.body.clientWidth renvoie différentes valeurs sur IE7, IE8 et Firefox:

IE 8:

document.body.clientHeight : 704 
document.body.clientWidth  : 1148

IE 7:

document.body.clientHeight : 704 
document.body.clientWidth  : 1132

FireFox:

document.body.clientHeight : 620 
document.body.clientWidth  : 1152

Pourquoi cet écart existe-t-il?
Existe-t-il des propriétés équivalentes qui sont cohérentes entre les différents navigateurs (IE8, IE7, Firefox) sans utiliser jQuery?

javascriptcssfirefoxinternet-explorer-8internet-explorer-7
24
nmdr

Cela a à voir avec le modèle de boîte du navigateur. Utilisez quelque chose comme jQuery ou une autre bibliothèque d'abstraction JavaScript pour normaliser le modèle DOM.

5
Paul Alexander

Paul A a raison sur la raison de la divergence mais la solution proposée par Ngm est fausse (au sens de JQuery).

L'équivalent de clientHeight et clientWidth dans jquery (1.3) est

$(window).width(), $(window).height()
23
arajek

L'élément body prend la largeur disponible, qui est généralement la fenêtre d'affichage de votre navigateur. En tant que tel, il y aura différentes dimensions entre les navigateurs en raison du navigateur chrome, barres de défilement, espace vertical occupé par les menus et ainsi de suite ...

Le fait que les hauteurs varient également, me dit également que vous définissez la hauteur body/html à 100% via css, car la hauteur dépend généralement des éléments à l'intérieur du corps ..

À moins que vous ne définissiez la largeur de l'élément body à une valeur fixe via css ou sa propriété de style, ses dimensions varieront en règle générale, toujours en fonction des navigateurs/versions et peut-être même en fonction des plugins que vous avez installés pour le navigateur. Les valeurs constantes dans un tel cas sont plus une exception à la règle ...

Lorsque vous appelez .clientWidth sur d'autres éléments qui ne prennent pas la largeur automatique de la fenêtre du navigateur, il renverra toujours les éléments 'width' + 'padding'. Ainsi, un div de largeur 200 et un remplissage de 20 auront clientWidth = 240 (20 remplissage à gauche et à droite).

Cependant, la principale raison pour laquelle on invoquerait clientWidth est précisément due aux éventuelles divergences attendues dans les résultats. Si vous savez que vous obtiendrez une largeur constante et que la valeur est connue, alors invoquer clientWidth est redondant ...

5
BGerrissen

L'équivalent de offsetHeight et offsetWidth dans jQuery est $ (window) .width (), $ (window) .height () Ce n'est pas le clientHeight et clientWidth

3
Niels Steenbeek

Element.clientWidth & Element.clientHeight Renvoient la hauteur/largeur du contenu de cet élément en plus de tout remplissage applicable.

L'implémentation jQuery de ceux-ci est: $(target).outerWidth() & $(target).outerHeight()

.clientWidth & .clientHeight Sont inclus dans la spécification du module d'affichage CSSOM qui est actuellement au stade de l'ébauche. Alors que les navigateurs modernes ont une implémentation cohérente de cette spécification, pour assurer des performances cohérentes sur les plates-formes héritées, l'implémentation jQuery doit toujours être utilisée.

Information additionnelle:

  • https: //developer.mozilla [dot] org/en-US/docs/Web/API/Element.clientWidth
  • https: //developer.mozilla [dot] org/en-US/docs/Web/API/Element.clientHeight
1
Brice

Ce que j'ai fait pour résoudre mon problème avec clientHeight, c'est d'utiliser le clientHight des contrôles firstChild. J'utilise IE 11 pour imprimer des étiquettes à partir d'une base de données et le clientHeight qui fonctionnait dans IE 8 renvoyait la hauteur de 0 dans IE 11. J'ai trouvé une propriété dans ce contrôle qui était répertoriée comme firstChild et qui avait une propriété si clientHeight et avait réellement la hauteur que je cherchais. Donc, si votre contrôle retourne un clientSize de 0, jetez un œil à la propriété de son premier enfant. Cela m'a aidé ...

1
Lee Ann Davidson

j'ai eu un problème similaire - firefox a renvoyé la valeur correcte de obj.clientHeight mais c'est-à-dire qu'il n'a pas renvoyé 0. Je l'ai changé en obj.offsetHeight et cela a fonctionné. Il semble qu'il y ait un état qui, par exemple, a pour la hauteur du client - cela le rend incertain ...

0
Johnny Darvall

Quelques informations supplémentaires pour la fenêtre du navigateur: http://www.w3schools.com/js/js_window.asp?output=print

0
Biranchi

Cela peut être dû au bug du modèle de boîte d'IE. Pour résoudre ce problème, vous pouvez utiliser le Box Model Hack .

0
Steve Harrison