Javascript outerWidth（true）在一行中两次返回不同的值，而不重新加载页面

我很困惑

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

---

我不知所措，甚至不知道该如何描述这种奇怪的行为。我注意到note.outerWidth（true）在前两次登录单击时报告了不同的宽度，但该对象永远不可见，在调用outerWidth之前应该设置其宽度…

当jQuery计算note.outerWidth（）时，它第一次获得其父宽度（loginForm=250px）因为注释的宽度没有在css中定义（只定义了最大宽度）

浏览器在.append（）之后呈现新注释内容，但其新宽度是在.offset（）之后计算的：

请参阅控制台日志：

=300px+2*（5px+1px）=312px

再次单击时，将根据312px而不是250px计算偏移量。这就是note将移动到另一个位置的原因

解决方案1：删除“位置：绝对”

说明： 如果设置position:absolute，则注释将从流中删除，不再从loginForm继承250px的宽度。因此，它的宽度不限于250px，而是最大宽度为300px+填充+边框=312px。 如果不设置position:absolute，便笺的宽度将被继承，并且始终等于250px

---

解决方案2：设置默认宽度

设置

的宽度。注意

在设置

left:-？px

时会发生变化（与

left:0

）。我现在没有时间写一个完整的答案。我把元素的位置改成了相对的，它不再这样做了，基肖尔，这在我这边似乎也行，但我不明白它是怎么工作的。我以为只有当位置设置为绝对时，你才能设置左和上。是的，这解决了它，但我仍然不明白为什么元素的宽度会改变。也许我太醉了。如果有人能解释的话，我当然会投赞成票：）。设置表单#loginform div.note{width:100%}也可以解决这个问题。实际上，我将这些东西放在函数中，因为在我的实际项目中它是动态的，我不需要在这个示例中使用该功能来显示问题。我很好奇到底是什么修正了这个错误。它只是删除了CSS中的top:0和left:0初始化吗？同样，我也想知道为什么。它会在append（）发生时立即呈现，因为note最初不是

display:none

。这是在进行outerWidth（true）呼叫之前。你对此的解释毫无意义；然而，解决方案1和2是合理的，你是对的。浏览器在.append（）之后呈现新的便笺内容，但其新宽度是在.offset（）之后计算的：请参阅控制台日志：当我正在调用的元素的内容.outerWidth（）是图像时，存在相同的问题。调用document.ready（）时，图像可能尚未准备就绪。加载映像后，对.outerWidth（）的第二次调用将返回正确的值。设置容器元素的宽度为我解决了这个问题，谢谢！

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