Question

我之前看过这个问题一两次，但从来没有一个适用于我的问题的答案（据我所知）。我有一个工具提示，点击链接时出现。我根据链接的位置设置工具提示的位置，类似于：

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

这在FF，IE等方面效果很好，但在Chrome和Safari中，工具提示总是大约60像素左右比我想要的更左边。我真的不喜欢编写浏览器特定代码，所以有没有人知道这会发生什么？提前谢谢。

更新：我能够通过从链接中删除margin：0自动样式来解决此问题。 Soooo ......修复它，但我仍然不知道为什么这是safari和chrome中的问题。

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 ettiquette，你可以回答你自己的问题，所以...... 我能够通过从链接中删除margin：0自动样式来解决此问题。 Soooo ......修复它，但我仍然不知道为什么这是safari和chrome中的问题。但是，至少它仍然是固定的。

Answer 4

刚出现同样的问题，删除margin: 0 auto;不是一个选项（也不是解决方案:)。这适用于我的需求，因为webkit报告我们正在寻找的值为左边距（只要边距> 0，否则报告position().left！）：

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

jquery position（）在safari和chrome中无法正常工作

4 个答案: