可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

When I alert the value .position().left, it returns 0 on Chrome. With other browsers it returns the actual number. Why does this happen?

回答1:

Webkit based browsers (like Chrome and Safari) can access images width and height properties 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).

So, if you have images in your page, with Webkit based browsers you should access offset information after the $(window).load event fires, and not after the $(document).ready event.

回答2:

By reading comments from http://api.jquery.com/position/, there are several ways to fix this. The one I found working is

Ajaho [Moderator] :This plugin function fixes problems with wrong position in 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 can be too fast sometimes, but it's often taken care of in jQuery. You can debug using something like:

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().left is "never" available and you need to debug elsewhere.

回答4:

I had the same problem..

I fixed it using: .offset().left instead. But be aware that are not the same: http://api.jquery.com/offset/

.position().left worked in Chrome in some tests I did, using a similar approach than David (the value was available since the first try).

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.

回答5:

Perhaps a bit outdated since the questions dates from 2010 but this did the trick for my positioning problems in Chrome:

$(window).load(function(){
  p = $('element').offset();
  // et cetera
});

回答6:

use jQuery(window).load() instead of jQuery(document).ready()

回答7:

For me it worked by placing the javascript code in a document ready just before the closing of the body tag

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>

回答8:

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
          };
      }