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

我以前曾见过这个问题出现过一次或两次，但从来没有一个适用于我的问题的答案（据我所知）。我有一个单击链接时出现的工具提示。我设置了提示的基于链路的类似于此位置的位置：jquery position（）在safari和chrome中无法正常工作

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

这在FF，IE等的伟大工程，但在Chrome和Safari，工具提示总是约60像素或比我想要的更靠左。我真的不喜欢编写浏览器特定的代码，所以有人有任何理由知道这会发生吗？在此先感谢。

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

来源

2011-03-17 Munzilla

使用偏移量（）。而不是 – Bob 2011-03-17 11:52:51

@Byron，这可能是问题的解决方案，但它不能解释为什么它发生了:) – 2011-03-17 11:56:28

使用偏移量实际上导致了其他问题，因为我需要相对于父项的位置发生元件。看看我上面的补充，看看我如何解决这个问题。 – Munzilla 2011-03-17 12:07:24

根据stackoverflow ettiquette，可以回答你自己的问题，所以... 我能够通过从链接中删除边距：0自动样式来解决此问题。 Soooo ......修正了它，但我仍然不知道为什么这是safari和chrome中的问题。但是，至少它是固定的。

来源

2011-04-03 12:04:26 Munzilla

position（）涉及相对于包含DOM元素的位置，而不是屏幕上的位置。这种差异可能是由Webkit浏览器中元素层次结构的不同造成的，而不是由jQuery中的错误造成的。

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

来源

2011-03-17 11:56:07 weltraumpirat

而不是使用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中都能正常工作。

来源

2013-04-26 20:41:13

刚刚有同样的问题，并删除margin: 0 auto;不是一个选项（也不是一个解决方案:)。这个工作对我需要，因为WebKit的报告中，我们正在寻找为左边界值（只要余量> 0，否则确实报告position().left！）：

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

来源

2014-05-28 19:53:13

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

回答

相关问题