浏览器启动时错误放置div

Question

我正在使用javascript / jquery将一堆div放在一个更大的div中：

this.inputArea.append(newItem);

this.inputArea是容器div的jquery对象，newItem是放置div的对应对象。由于要求，必须手动设置div的确切位置，这可以通过

完成

newItem.offset({top: this.droppableOffsetTop+topOffset, left:this.droppableOffsetLeft+leftOffset});

我不会厌倦你对coords的确切计算;足以说它们基于this.inputArea.offset（）以及新项目应该在其中的位置。此代码将多个div放在一起，并在页面加载完成后立即运行。

除了一个例外，它按预期工作。当浏览器首次加载页面时，所有div都被放置在整个页面的随机位置，在其预期容器的内部和外部。我已经在Firefox和Chrome中对此进行了测试，两者都有。刷新选项卡可以解决问题。在第二个选项卡中打开它可以显示一切正常。为了在firefox中执行“Inspect Element”时更加奇怪，它会立即将它们放置在应该存在的位置，就好像它是用手抓住cookie罐一样。

这是正确的位置：

这就是我得到的：

出于调试目的，我在控制台中输出了计算出的坐标，它们总是一样的，所以代码工作正常，只是两个不同的浏览器在第一次加载时放置div有一些奇怪的问题。

有谁知道这是什么？我没有发布完整的代码，因为它在一个复杂的结构中，但我可能会尝试制作一个简单的版本，以便在必要时显示。

Answer 1

我不知道为什么会这样，但我更换了

newItem.offset({top: this.droppableOffsetTop+topOffset, left:this.droppableOffsetLeft+leftOffset});

（大致）以下内容：

newItem.css('top', topOffset + 'px');
newItem.css('left', leftOffset + 'px');

现在它有效。

哦，好吧。