Chrome的jQuery位置问题
Posted
技术标签:
【中文标题】Chrome的jQuery位置问题【英文标题】：jQuery position problem with Chrome 【发布时间】：2010-01-31 19:40:31 【问题描述】：当我提醒值 .position().left 时，它在 Chrome 上返回 0。对于其他浏览器，它会返回实际数字。为什么会这样？
【问题讨论】：
请发布更多代码，特别是您在哪个元素上调用position，也许还有一些 html/CSS 看看可能出了什么问题。
【参考方案1】：
基于 Webkit 的浏览器（如 Chrome 和 Safari）只有在图像完全加载后才能访问图像 width 和 height 属性。其他浏览器只要加载 DOM 就可以访问这些信息（它们不需要完全加载图像来知道它们的大小）。
因此，如果您的页面中有图像，则使用基于 Webkit 的浏览器您应该在 $(window).load 事件触发后访问 offset 信息，而不是在 $(document).ready 事件后访问。
【讨论】：
有时即使这样也行不通。另一种选择是在您的 css 中手动设置图像大小。 显然 webkit 也只能在 window.load 之后访问文本宽度和高度属性。似乎很愚蠢，即使 Internet Explorer 也能做到这一点。我认为最后一个会出错的是 webkit。【参考方案2】：通过从http://api.jquery.com/position/ 读取 cmets，有几种方法可以解决此问题。 我发现工作的是
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
;
;
【讨论】：
【参考方案3】：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);
这将检查职位是否以及何时可用。如果您在无穷大中记录“0”，则position().left“从不”可用，您需要在其他地方进行调试。
【讨论】：
谢谢 - 这也是jQuery.offset() 返回不正确（非零）值的原因 - 看起来我的 CSS 定位导致 Chrome 将文档布局两次（或其他内容）。过早调用 offset 会返回元素的位置，就像没有 CSS 时一样。
+1 我昨天遇到了这个问题。即使在简单的$(function()console.log($('img').position().top);); 中位置也不正确，但稍后在单击事件中使用相同的代码时位置是正确的。【参考方案4】：
我有同样的问题..
我改用：.offset().left 修复它。但请注意，它们不一样：
http://api.jquery.com/offset/
.position().left 在我做的一些测试中在 Chrome 中工作，使用
与 David 类似的方法（该值自
第一次尝试）。
在我的“真实”应用程序中甚至失败了
读取点击事件的位置（这可能会消除任何加载
速度问题）。
一些 cmets（在其他论坛中）说这可能是相关的
使用display:inline-block。然而我做不到
使用inline-block 重现问题。所以它可能
成为其他东西。
【讨论】：
【参考方案5】：可能有点过时了，因为问题可以追溯到 2010 年，但这解决了我在 Chrome 中的定位问题：
$(window).load(function()
p = $('element').offset();
// et cetera
);
【讨论】：
【参考方案6】：使用 jQuery(window).load() 代替 jQuery(document).ready()
【讨论】：
【参考方案7】：对我来说，它是通过将 javascript 代码放在正文标记关闭之前准备好的文档中来工作的
这样它会在加载完所有内容后执行代码
<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>
【讨论】：
【参考方案8】：我用这个函数来修正它。
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
;
【讨论】：
以上是关于Chrome的jQuery位置问题的主要内容，如果未能解决你的问题，请参考以下文章
jQuery animate() 在 Google Chrome 和 Safari 中的左侧位置
jquery 虚拟键盘 - Chrome 和 Edge 中的光标不闪烁
jQuery `[jQuery created Element].is(":hover")` 似乎只在 Chrome 中工作