jquery position() ne fonctionne pas correctement dans safari et chrome

J'ai vu cette question posée une fois ou deux fois avant, mais jamais avec une réponse qui s'applique à mon problème (autant que je sache).
J'ai une info-bulle qui s'affiche lorsque le lien est cliqué. J'ai défini la position de l'info-bulle en fonction de la position de la liaison similaire à ceci:

$('#tooltip').css('left', $(this).position().left);

Cela fonctionne très bien dans FF, IE, etc., mais dans Chrome et Safari, la bulle d'aide est toujours d'environ 60 pixels ou plus à gauche que ce que je veux. Je n'aime vraiment pas l'écriture spécifiques au navigateur de code, donc, il y a quelque raison que quelqu'un sait ce que ce serait se passe?
Merci à l'avance.

Mise à JOUR:
J'ai été en mesure de résoudre ce problème en supprimant le margin:0 auto de style à partir du lien. Soooo...qu'il fixe, mais je n'ai toujours aucune idée de la raison de ce problème sur safari et chrome.

Utiliser l'offset().gauche au lieu de
c'est probablement la solution au problème, mais il n'explique pas pourquoi que ça se passe 🙂
à l'aide d'offset effectivement causé d'autres problèmes parce que j'ai besoin de la position de se produire par rapport à un élément parent. Voir mes ajouts ci-dessus pour voir comment j'ai résolu ce.

OriginalL'auteur Munzilla | 2011-03-17

  1. 6

    position() se rapporte à la position par rapport au contenant de l'élément DOM, par opposition à la position sur l'écran. La différence est probablement causée par des différences dans la façon dont la hiérarchie de l'élément est rendu dans les navigateurs Webkit, plutôt que par un bogue dans jQuery.

    Vous aurez pour vérifier l'élément de hiérarchies pour trouver quel élément du DOM est à l'origine de votre problème, ou, si vous souhaitez positionner votre info-bulle par rapport à la position d'un élément dans la fenêtre des limites, utiliser offset() à la place.

    OriginalL'auteur weltraumpirat

  2. 3

    Au lieu d'utiliser position() comme dans votre exemple:

    var link = $('#mymenu a');
var tooltip = $('#mymenu #tooltip');

link.click(function(){
  tooltip.css('left', $(this).position().left);
});

    vous pouvez utiliser la soustraction de l'élément offset() avec offset() de celle du parent (pas nécessairement la plus proche parent):

    var parent = $('#mymenu');
var link = $('#mymenu a');
var tooltip = $('#mymenu #tooltip');

link.click(function(){
    parent.css('position', 'relative');
    tooltip.css('left', $(this).offset().left - parent.offset().left);
});

    Il renvoie la même valeur que position() mais fonctionne correctement dans les deux FF et Chrome.

    OriginalL'auteur Konst_

  3. 2

    Selon stackoverflow ettiquette, c'est pas grave pour la réponse que vous êtes propre question, donc...
    J'ai été en mesure de résoudre ce problème en supprimant le margin:0 auto de style à partir du lien. Soooo...qu'il fixe, mais je n'ai toujours aucune idée de la raison de ce problème sur safari et chrome. Mais, la encore, au moins, c'est corrigé.

    OriginalL'auteur Munzilla

  4. 0

    Juste eu le même problème, et la suppression de margin: 0 auto; n'était pas une option, ni une solution :). Il a travaillé pour des mon besoins, depuis webkit rapports sur la valeur, nous sommes à la recherche pour le marge de gauche (tant que la marge est > 0, sinon il ne rapport position().left!):

    iPosLeft = oEl.position().left + parseInt(oEl.css('marginLeft'));

    OriginalL'auteur Brandon Hill