Chrome的jQuery位置问题答案

【问题标题】：jQuery position problem with ChromeChrome的jQuery位置问题
【发布时间】：2010-01-31 19:40:31
【问题描述】：

当我提醒值 .position().left 时，它在 Chrome 上返回 0。对于其他浏览器，它会返回实际数字。为什么会这样？

【问题讨论】：

请发布更多代码，特别是您在哪个元素上调用position，也许还有一些 HTML/CSS 看看可能出了什么问题。

标签： jquery google-chrome position

【解决方案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
          };
      }

【讨论】：