pourquoi dans le code suivant .Height () retourne 95 plutôt que 100, tandis que .Width () retourne 200 comme prévu? Je travaille avec Firefox 3.6.3.
HTML: P>
$("#my").width(200).height(100);
$("#log").append("Width = " + $("#my").width() + "<br />");
$("#log").append("Height = " + $("#my").height());
3 Réponses :
Je ne suis pas sûr de cela. Je trouve aussi cela plutôt étrange .. c'est ma supposition.
Le modèle de boîte moderne ne fait pas cela. Peut-être que c'est un problème IE6 ... mais ne devrait-il pas être 190 et 90 si c'est le cas?
La question est de savoir pourquoi la largeur et la hauteur se comportent différemment. Je m'attendrais à inclure ou non à inclure la frontière / le rembourrage / les marges.
étrange en effet. L'utilisation de contours au lieu de la frontière corrige le problème cependant. Donc, cela a à voir avec le modèle de boîte. Largeur: 195, Hauteur: 95 sur chrome 14
Il y a quelques méthodes de jQuery pour calculer la hauteur et la largeur. Essayez d'utiliser Extrait de JQuery Docs: http: // API .jquery.com / Outerheight / INCLUMARGIN - Un booléen indiquant
s'il faut inclure l'élément
marge dans le calcul.
http://api.jquerery.com/innerheight/ Cette méthode renvoie la hauteur de la
élément, y compris haut et bas
rembourrage, en pixels.
Modifier: Hauteur de réglage () sur l'élément TD est ajusté pour inclure le remplissage par défaut (1px). Les dimensions calculées sont en réalité ... Vous devez définir le remplissage par défaut sur 0PX pour éviter ces problèmes. EDIT 2: Il semble être un problème de navigateur (probablement quelque chose à la méthode du moteur de rendu de calcul des dimensions d'une table). Les effets de ce comportement varieront d'une traversée entre les brouillards. Vous devriez trouver une solution alternative, moins de table, en utilisant des divs. OUTERHEIGHT ()
.outerheight ([incluseMargin])
.innerheight ()
(source: Wordofjohn.com )
Les fonctions extérieures et internes ne vous aident pas ici. Voir la question mise à jour.
J'ai essayé de définir Padding = 0 de TD , mais cela n'a pas aidé. Voir la question mise à jour.
C'est exactement ce que j'ai décidé de faire: trouver une autre solution en utilisant div s :)
Je ne peux pas vraiment expliquer ce comportement mieux que John, mais puisque cette incohérence de navigateur est toujours autour (du moins pour ceux qui ne peuvent pas mettre à niveau la version jQuery), je pensais partager une solution de contournement pour ce problème.
Utilisation des propriétés HTML DOM ClientHeight em> et Clientwidth em> semble être cohérente sur la plupart des navigateurs. P> $("#my").width(200).height(100);
$("#log").append("Width = " + $("#my").attr("clientWidth") + "<br />");
$("#log").append("Height = " + $("#my").attr("clientHeight"));
Sur Google Chrome 4.1.249.1064, je reçois la hauteur 95 et la largeur 195.
Ceci est soit un problème de navigateur, soit un problème avec d'autres CSS présents. Dans Google Chrome 6.0.401.1 Dev, j'ai eu des résultats escomptés. jsbin.com/omefu/2
@Misha: Les incohérences sont causées par le rembourrage par défaut de la table / TD. Voir la réponse mise à jour ci-dessous :).
J'ai essayé de définir le remplissage de
TD à 0PX, mais il n'a pas aidé: jsfiddle. NET / HBQVA@Misha: Si vous supprimez la frontière, cela fonctionne bien. Je ne sais pas pourquoi seule la hauteur () est affectée et non de la largeur. Il semble être un problème de navigateur (et non JQuery-Lib associé), car les dimensions calculées sont 200x95. En regardant ça maintenant ...
@Misha: révisé ma réponse, votre meilleur choix serait de trouver une solution alternative: p.