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

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

$('#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'));