11
votes

Différences de positionnement de JQuery entre Chrome (WebKit) et Firefox

Tout en travaillant sur un curseur de gamme Ui JQuery, je débobile principalement en chrome. J'avais besoin de faire une limite de la fourchette, donc je saisirais la position gauche de l'une des poignées comme SO:

$ el.css ("gauche");

Qui me donnerait la position gauche en pourcentage: 84% . Cependant, lorsque j'ai testé dans Firefox, il renvoyait la valeur en pixels.

Quelqu'un a-t-il déjà vécu cela? Basé sur la recherche sur le DOM en Firebug, Firefox reconnaît le positionnement à gauche à base de pourcentage, mais il ne semble pas de retourner cela comme une valeur. Ce comportement par défaut est-il pour Firefox? Est-ce la même chose dans IE aussi?


8 commentaires

Bonne question. J'ai été surpris récemment de trouver CSS ("GAUCHE") renvoyant des pixels de retour dans Firefox lorsque la propriété a été spécifiée comme pourcentage (ou EMS). Après tout, vous pouvez toujours obtenir la valeur de pixel à l'aide de la position (). GAUCHE. Je ne l'ai pas vérifié à Chrome, cependant.


Ya, je me suis surprise lorsque l'un des éléments vient de tirer parti de l'écran lorsque je pensais que j'étais fondamentalement fait avec cette fonctionnalité. Travailler sur un MBP W / O VMware ou similaire, alors ne peut pas vraiment tester pour IE maintenant.


Cela ne répond pas à votre question, mais une solution de contournement basée sur JQuery consiste à utiliser position ( api.jquery.com/position ), qui retourne la même valeur (en pixels) sur chaque navigateur.


@Emmett, je faisais cela, mais puisque la position est tronquée (comme dans, aucune valeur décimale), les poignées de curseur de gamme UI JQuery UI «sautent» parfois, ce qui rend une expérience gênante. On dirait que ceci est juste la façon dont la mise en œuvre est jusqu'à ce que quelqu'un dit autrement.


Si aucune solution n'est trouvée ici, veuillez envisager de déposer un rapport de bogue sur le site Web de JQuery. Ma première hypothèse aurait été qu'elle renvoie la valeur stockée en interne, qui est des pixels. Mais comme vous l'avez dit, cela afficherait toujours le pourcentage en Firebug ... Vous voudrez peut-être vérifier l'onglet calculé en Firebug. Autre que cela, je suis à court d'idées et je peux voir que cela peut être un bug.


Un test rapide ici a montré une valeur de pixels comme «gauche» en Firebug et une valeur de pourcentage sur les outils de développeur chromé. Le même si vous appelez directement obtenir directement. Compte tenu de la définition de GETComputerStyle () par le W3C, je suis en fait surprise que pour le chrome, une valeur de pourcentage est considérée comme une valeur "calculée". Je m'attendais à ce que tous les navigateurs renvoient à la place une valeur de pixel.


Si position ne vous suffit pas, je me demande comment / où vous êtes exactement paramètre les valeurs de pourcentage. Si le navigateur ne renvoie pas une valeur de pourcentage intacte pour vous, vous voudrez peut-être stocker la valeur ailleurs afin que vous puissiez les récupérer?


@ehabkost - Le curseur UI jquery définit les valeurs en interne


5 Réponses :


0
votes

Je ne crois pas qu'il y ait des différences connues pour positionnement avec JQuery à partir de la dernière version 1.4.4.


0 commentaires

0
votes

J'ai utilisé un plugin dans le passé: http://plugins.jquery.com/project/dimensions


0 commentaires

0
votes

La fonction CSS () renvoie la valeur de la propriété CSS spécifiée comme indiqué par le navigateur. En conséquence, il est spécifique au navigateur et ne doit pas être utilisé lorsqu'il s'agit de longueurs et de positionnement de cette manière.


1 commentaires

Je suis d'accord, la fonction CSS () vous permet de manipuler ou de lire des propriétés CSS et ceux-ci sont (malheureusement) interprétés différemment par navigateur. Utilisez la fonction Position () si vous souhaitez des chiffres et des résultats indépendants du navigateur.



1
votes

Utilisez $ el.position (). gauche; à la place :)


1 commentaires

Cela peut renvoyer le même résultat si vous n'avez pas de chance. (Pour le moment pour moi)



0
votes

J'ai travaillé autour de cette question en accédant à DOM directement, comme celui-ci:

$ el.get (0) .style.left

Il renvoie la valeur% de FF, Chrome, Safari et IE9. (Ne l'a pas testé sur l'opéra, cependant)


0 commentaires