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中無法正常工作

回答

相關問題