4

非表示になっているいくつかの選択要素の幅を取得しようとしています。JQuery オブジェクトで width() を使用すると、CSS 定義の幅であるがパディングを含む幅が返されます。ただし、要素を切り替えて表示すると、width() を呼び出すと正しい値が返されます (つまり、パディング/ボーダー/マージンを除く幅)。

サンプル HTML:

<span id="test" style="visibility:hidden">
    <select id="one">
        <option>1</option><option>2</option><option>3</option>
    </select>
</span>

CSS:

   select {
        width: 80px;
        padding: 0 0 0 15px;
    }

予想される幅: 65、報告される幅: 80

これが私の問題を示す JSFiddle です: http://jsfiddle.net/2RH7C/4/

「visibility: hidden」(display: none の代わりに) を設定するか、オブジェクトを画面外に複製/移動する以外に回避策はありますか? 私は KnockoutJS データ バインディングを使用して可視性を制御しています。そのバインディング セットは表示: なし (http://knockoutjs.com/documentation/visible-binding.html) です。

4

3 に答える 3

1

これは、jQuery 1.8 では発生しない jQuery 1.7 のバグのようです。

http://jsfiddle.net/2RH7C/5/

jQueryを更新するオプションがない場合は、「オフスクリーン要素で計算する」またはvisibility: hiddenメソッドが唯一のオプションであるように思われます。

于 2012-11-28T23:52:38.660 に答える
1

1辺1pxのボーダーです。縁取りあり:なし; 結果は 65 です。

于 2012-11-28T23:41:14.157 に答える
0

JavaScriptは正しいです。width() を使用すると、すでにパディングがなくなります。レンダリングされた幅は、実際には 110px (80+15+15) になります。

于 2012-11-28T23:43:22.740 に答える