jquery position() 在 safari 和 chrome 中无法正常工作答案

【问题标题】：jquery position() not working correctly in safari and chromejquery position() 在 safari 和 chrome 中无法正常工作
【发布时间】：2011-07-17 08:27:17
【问题描述】：

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

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

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

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

【问题讨论】：

@Byron，这可能是问题的解决方案，但它没有解释 为什么 它会发生 :)
使用偏移实际上会导致其他问题，因为我需要相对于父元素发生位置。请参阅上面的补充内容，了解我是如何解决此问题的。

标签： javascript jquery google-chrome safari position

【解决方案1】：

position() 与相对于包含 DOM 元素的位置相关，而不是屏幕上的位置。这种差异可能是由 Webkit 浏览器中呈现元素层次结构的方式不同引起的，而不是由 jQuery 中的错误引起的。

您必须检查元素层次结构以找出导致问题的 DOM 元素，或者，如果您想相对于窗口边界内元素的位置定位工具提示，请改用 offset()。

【讨论】：

【解决方案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 中都能正常工作。

【讨论】：

【解决方案3】：

按照stackoverflow的礼仪，回答自己的问题是可以的，所以...

我可以通过从链接中删除 margin:0 自动样式来解决这个问题。 Soooo ...修复了它，但我仍然不知道为什么这是 safari 和 chrome 中的问题。但是，至少它仍然是固定的。

【讨论】：

【解决方案4】：

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

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

【讨论】：