Chrome 的 jQuery 位置问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2173040/
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 problem with Chrome
提问by goksel
回答by Luca Fagioli
Webkit based browsers (like Chrome and Safari) can access images widthand heightproperties only after images have been fully loaded. Other browsers can access this information as soon as just the DOM is loaded (they don't need to load the images entirely to know their size).
只有在图像完全加载后，基于 Webkit 的浏览器（如 Chrome 和 Safari）才能访问图像width和height属性。其他浏览器可以在加载 DOM 后立即访问此信息（它们不需要完全加载图像来了解它们的大小）。
So, if you have images in your page, with Webkit based browsers you should access offsetinformation after the $(window).loadevent fires, and not after the $(document).readyevent.
因此，如果您的页面中有图像，使用基于 Webkit 的浏览器，您应该offset在$(window).load事件触发后访问信息，而不是在事件发生后访问$(document).ready。
回答by user227353
By reading comments from http://api.jquery.com/position/, there are several ways to fix this. The one I found working is
通过阅读来自http://api.jquery.com/position/ 的评论，有几种方法可以解决这个问题。我发现工作的是
Ajaho [Moderator] :This plugin function fixes problems with wrong position in Chrome
Ajaho [版主]：这个插件功能修复了Chrome中位置错误的问题
jQuery.fn.aPosition = function() {
thisLeft = this.offset().left;
thisTop = this.offset().top;
thisParent = this.parent();
parentLeft = thisParent.offset().left;
parentTop = thisParent.offset().top;
return {
left: thisLeft-parentLeft,
top: thisTop-parentTop
};
};
回答by David Hellsing
Webkit can be too fast sometimes, but it's often taken care of in jQuery. You can debug using something like:
Webkit 有时可能会太快，但它通常在 jQuery 中得到处理。您可以使用以下方法进行调试：
var v, elem = $('.myElement');
window.setTimeout(function() {
v = elem.position().left;
console.log(v);
if (v) {
return false;
}
window.setTimeout(arguments.callee, 1);
}, 1);
This will check if and when the position is available. If you are logging "0" in infinity, the position().leftis "never" available and you need to debug elsewhere.
这将检查该职位是否以及何时可用。如果您在无穷大中记录“0”，position().left则“永远”不可用，您需要在其他地方进行调试。
回答by lepe
I had the same problem..
我有同样的问题..
I fixed it using: .offset().leftinstead. But be aware that are not the same:
http://api.jquery.com/offset/
我用：.offset().left来修复它。但请注意，这是不一样的：http:
//api.jquery.com/offset/
.position().leftworked in Chrome in some tests I did, using
a similar approach than David (the value was available since the
first try).
.position().left在我做过的一些测试中在 Chrome 中工作，使用与 David 类似的方法（该值自第一次尝试以来就可用）。
In my "real" application failed even
reading the position on click event (which may eliminate any loading
speed problem).
Some comments (in other forum) say it may be related
to the use of display:inline-block. However I couldn't
reproduce the problem using inline-block. So it may
be other thing.
在我的“真实”应用程序中，即使读取点击事件的位置也失败（这可能会消除任何加载速度问题）。一些评论（在其他论坛中）说这可能与使用display:inline-block. 但是我无法使用inline-block. 所以它可能是另一回事。
回答by Hekman
Perhaps a bit outdated since the questions dates from 2010 but this did the trick for my positioning problems in Chrome:
可能有点过时了，因为这些问题可以追溯到 2010 年，但这确实解决了我在 Chrome 中的定位问题：
$(window).load(function(){
p = $('element').offset();
// et cetera
});
回答by zuckerhut
use jQuery(window).load() instead of jQuery(document).ready()
使用 jQuery(window).load() 而不是 jQuery(document).ready()
回答by Martin Taleski
For me it worked by placing the javascript code in a document ready just before the closing of the body tag
对我来说，它的工作原理是在 body 标签关闭之前将 javascript 代码放在准备好的文档中
That way it executes the code after it has loaded everything
这样它在加载完所有内容后执行代码
<body>
<div>content</div>
<div class='footer'>footer</div>
.
.
.
<script type='text/javascript>
$(document).ready(function(){
var footer_position = $(".footer").offset().top;
console.log(footer_position);
});
</script>
</body>
回答by user2129794
I use this function to correct it.
我用这个函数来纠正它。
function getElementPosition(id) {
var offsetTrail = document.getElementById(id);
var offsetBottom = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetBottom += offsetTrail.offsetBottom;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
return {
bottom: offsetBottom,
toppos: offsetTop
};
}
