当元素被隐藏时，outerWidth() 返回不同的值答案

【问题标题】：outerWidth() Returns a Different Value when Element is Hidden当元素被隐藏时，outerWidth() 返回不同的值
【发布时间】：2015-10-12 17:22:31
【问题描述】：

我正在尝试对jQuery UI MultiSelect Widget 进行一些调整。

我遇到的一个问题是刷新控件后主控件有点太宽。查看代码，宽度设置使用：

var width = this.element.outerWidth();

其中this.element 指的是我原来的<select> 控件，它已被jQuery UI MultiSelect Widget 隐藏。

玩弄这个，我可以看到 outerWidth() 在我的 <select> 元素被隐藏时返回 424，当它可见时它返回 406。（注意width()在隐藏元素时也会返回更大的值。）

有谁知道宽度会根据控件是否可见而改变的原因或方式？控件可见时返回的值似乎是正确的值。

编辑：

我创建了一个jsFiddle 来演示这一点。

【问题讨论】：

您的select 中是否有比select 本身更宽的option？
@Arbel：不，最宽的选项比<select> 窄得多。我已经考虑过这一点，但仍然不应该根据元素是否可见而改变。
我最近回答了一个类似的问题。基本上，当元素被隐藏时，宽度函数不能保证返回准确的宽度。您可以依赖元素可见时获得的读数。
api.jquery.com/outerwidth -> 当元素或其父元素被隐藏时，.outerWidth() 报告的值不保证准确。
@SalmanA：我觉得这很奇怪。我读到它可以为隐藏元素返回 0，我不明白它为我返回的数字来自哪里。无论如何，如果您想将您的回复移至某个答案，我可以将其标记为正确答案。

【解决方案1】：

您无法获取display:none; 元素的宽度。

您需要使用Position:absolute; 和left:-999999px; 将其隐藏。

这里是你需要的 css。不要忘记将position:relative 放在 div 包装器上。

【讨论】：