javascript - outerWidth(true) 连续两次返回不同的值，无需重新加载页面

Question

我很困惑。

http://jsfiddle.net/pyn8s/

点击登录按钮。等待弹出窗口出现。注意它的位置。再次单击登录按钮。看着它向左移动。 (正确位置)再次单击登录按钮。请注意，它不再移动了。

我很茫然，我什至不确定如何描述这种奇怪的行为。我注意到 note.outerWidth(true) 上的警报，它在前两次登录点击时报告了不同的宽度，但该对象永远不会不可见，并且应该在调用 outerWidth 之前设置它的宽度...

Answer 1

当 jQuery 第一次评估 note.outerWidth() 时，它会获取其父级宽度 (loginForm = 250px)，因为 note 的宽度未在 css 中定义(仅定义了 max-width)。

浏览器在 .append() 之后渲染新的笔记内容，但它的新宽度是在 .offset() 之后计算的:

查看控制台日志:http://jsfiddle.net/HighKickX/QSsV6/

max-width + 2 * (padding + border-width)

= 300px + 2 * (5px + 1px) = 312px

当您再次点击时，偏移量将根据 312px 而不是 250px 进行计算。这就是为什么音符会移动到另一个位置。

解决方案 1:删除“position: absolute”http://jsfiddle.net/HighKickX/wjeGF/

解释:如果你设置 position: absolute，note 被从流中取出并且不再从 loginForm 继承 250px 的宽度。所以它的宽度不限于 250px，而是最大宽度 300px + padding + border = 312px。如果您不设置 position: absolute，笔记的宽度将被继承并等于 250px(始终)。

解决方案 2:设置默认宽度 http://jsfiddle.net/HighKickX/Ex3Bp/