3

我很困惑。

http://jsfiddle.net/pyn8s/

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

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

4

1 回答 1

3

当 jQuery 第一次评估 note.outerWidth() 时,它会得到它的父宽度(loginForm = 250px),因为在 css 中没有定义 note 的宽度(只定义了 max-width)。

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

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

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

= 300像素 + 2 * (5 像素 + 1 像素) = 312 像素

再次单击时,偏移量将根据 312px 而不是 250px 计算。这就是为什么音符会移动到另一个位置的原因。

解决方案 1:删除“位置:绝对” http://jsfiddle.net/HighKickX/wjeGF/

说明:如果您设置 position: absolute,则注释会从流程中取出,并且不再从 loginForm 继承 250px 的宽度。所以它的宽度不限于250px,而是最大宽度为300px + padding + border = 312px。如果你不设置 position: absolute,note 的宽度将被继承并且等于 250px(一直)。

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

于 2012-07-05T01:33:09.777 回答