javascript jquery position() 在 safari 和 chrome 中无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5338594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery position() not working correctly in safari and chrome
提问by Munzilla
I've seen this question posed once or twice before, but never with an answer that applies to my problem (as far as I know). I have a tooltip that appears when a link is clicked. I set the position of the tooltip based on the position of the link similar to this:
我以前见过这个问题提出过一两次，但从来没有一个适用于我的问题的答案（据我所知）。我有一个在单击链接时出现的工具提示。我根据与此类似的链接的位置设置工具提示的位置：
$('#tooltip').css('left', $(this).position().left);
This works great in FF, IE, etc., but in Chrome and Safari, the tooltip is always about 60 pixels or so further to the left than I want. I really don't like writing browser specific code, so is there any reason anyone knows that this would be happening? Thanks in advance.
这在 FF、IE 等中效果很好，但在 Chrome 和 Safari 中，工具提示总是比我想要的更靠左 60 像素左右。我真的不喜欢编写特定于浏览器的代码，所以有人知道这会发生吗？提前致谢。
UPDATE: I was able to fix this problem by removing the margin:0 auto style from the link. Soooo...that fixed it, but I still have no idea WHY this was a problem in safari and chrome.
更新：我能够通过从链接中删除 margin:0 自动样式来解决这个问题。Soooo...修复了它，但我仍然不知道为什么这是 safari 和 chrome 中的问题。
采纳答案by Munzilla
According to stackoverflow ettiquette, it's okay to answer you're own question, so... I was able to fix this problem by removing the margin:0 auto style from the link. Soooo...that fixed it, but I still have no idea WHY this was a problem in safari and chrome. But, still at least it's fixed.
根据stackoverflow ettiquette，可以回答你自己的问题，所以......我能够通过从链接中删除 margin:0 自动样式来解决这个问题。Soooo...修复了它，但我仍然不知道为什么这是 safari 和 chrome 中的问题。但是，至少它仍然是固定的。
回答by weltraumpirat
position() relates to the position relative to the containing DOM element, as opposed to the position on screen. The difference is probably caused by differences in the way the element hierarchy is rendered in Webkit browsers, rather than by a bug in jQuery.
position() 涉及相对于包含 DOM 元素的位置，而不是屏幕上的位置。这种差异可能是由 Webkit 浏览器中元素层次结构呈现方式的差异引起的，而不是由 jQuery 中的错误引起的。
You will have to check element hierarchies to find out which DOM element is causing your problem, or, if you want to position your tooltip relative to the position of an element within the window boundaries, use offset()instead.
您必须检查元素层次结构以找出导致问题的 DOM 元素，或者，如果您想相对于窗口边界内元素的位置定位工具提示，请改用offset()。
回答by Konst_
Instead of using position()like in your example:
而不是position()在您的示例中使用like：
var link = $('#mymenu a');
var tooltip = $('#mymenu #tooltip');
link.click(function(){
tooltip.css('left', $(this).position().left);
});
you can use subtraction of the element's offset()with offset()of it's parent (not necessarily the closest parent):
您可以使用元素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);
});
It returns the same value as position()but works correctly in both FF and Chrome.
它返回相同的值，position()但在 FF 和 Chrome 中都能正常工作。
回答by Brandon Hill
Just had the same problem, and removing margin: 0 auto;wasn't an option (nor is it a solution :). This worked for myneeds, since webkit reports the value we're looking for as the left margin(so long as the margin is > 0, otherwise it doesreport position().left!):
刚刚遇到了同样的问题，删除margin: 0 auto;不是一个选项（也不是一个解决方案:)。这满足了我的需求，因为 webkit 将我们正在寻找的值报告为左边距（只要边距 > 0，否则它会报告position().left！）：
iPosLeft = oEl.position().left + parseInt(oEl.css('marginLeft'));
