Положение jquery () не работает правильно в Safari и Chrome

Question

Я видел этот вопрос один или два раза раньше, но никогда с ответом, который относится к моей проблеме (насколько я знаю). У меня есть всплывающая подсказка, которая появляется при нажатии на ссылку. Я устанавливаю позицию всплывающей подсказки на основе позиции ссылки, подобной этой:

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

Это прекрасно работает в FF, IE и т. Д., Но в Chrome и Safari всплывающая подсказка всегда примерно на 60 пикселей или чуть дальше влево, чем я хочу. Мне действительно не нравится писать код для браузера, поэтому есть ли причина, по которой кто-нибудь знает, что это может произойти? Заранее спасибо.

UPDATE: Я смог решить эту проблему, убрав из ссылки марку: 0 auto style. Тааак ... это исправило это, но я до сих пор понятия не имею, ПОЧЕМУ это было проблемой в сафари и хром.

Answer 1

position () относится к позиции относительно содержащего элемента DOM, а не к позиции на экране. Различие, вероятно, вызвано различиями в способе отображения иерархии элементов в браузерах Webkit, а не ошибкой в ​​jQuery.

Вам придется проверить иерархии элементов, чтобы выяснить, какой элемент DOM вызывает вашу проблему, или, если вы хотите расположить всплывающую подсказку относительно позиции элемента в границах окна, используйте offset () вместо.

Answer 2

Вместо использования position(), как в вашем примере:

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

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

, вы можете использовать вычитание offset() элемента с offset() его родителя (необязательно ближайшего родителя):

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);
});

Возвращает то же значение, что и position(), но работает правильно как в FF, так и в Chrome.

Answer 3

Согласно этикету stackoverflow, можно ответить на свой вопрос, так что ... Я смог решить эту проблему, убрав из ссылки марку: 0 auto style. Тааак ... это исправило это, но я до сих пор понятия не имею, ПОЧЕМУ это было проблемой в сафари и хром. Но, по крайней мере, это по-прежнему исправлено.

Answer 4

Просто была такая же проблема, и удаление margin: 0 auto; не было вариантом (и при этом это не решение :). Это сработало для моих потребностей, поскольку webkit сообщает значение, которое мы ищем, как левое поле (при условии, что поле> 0, в противном случае оно делает отчет position().left!):

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