0

ユーザー インターフェイスのチュートリアル中に、いくつかのページ要素にスポットライトを描画しようとしています (グラデーション付きの角丸四角形を使用した CSS3 スポットライト効果 を参照)。

たとえば、ナビゲーション バーは次のとおりです。

ここに画像の説明を入力

注目されています (ページの残りの部分は淡色表示されています):

ここに画像の説明を入力

しかし、私のページの要素の 1 つが問題を引き起こしています。Chrome での配置は次のとおりです。

ここに画像の説明を入力

ただし、jQuery は 330px x 60px と認識しています。

> var blah = $('.user-list')
[
<div class=​"well well-skinny user-list">​…​&lt;/div>​
]
> blah.height()
60
> blah.width()
330

これにより、スポットライトを描画すると小さすぎます。

ここに画像の説明を入力

奇妙なことに、ページには (navbar のような) 他の要素がたくさんあり、それらのサイズは正しく計算され、スポットライトはそれらを正しく表示します。

jQuery が誤った高さと幅を表示する原因となっているこの要素はどうなっていますか? いくつかの追加情報:

  • ブートストラップではうまく機能しない要素border-boxを除いて、ページ全体がサイズ変更されています。input
  • サイズの不一致を補う 1 ピクセルの境界線ですべての側面に 9 ピクセルのパディングがありますが、サイズの計算が適切に機能する境界線/パディングを含む他の多くの要素があり、これが唯一の奇妙な要素です。たとえば、上記のブートストラップ ナビゲーション バーには、左右に 20 ピクセルのパディングがありますが、幅は正しく計算されています。
4

2 に答える 2

0

幅は多くの場所で十分に説明されていませんが、「コンテキスト ボックス」の幅としてより適切に定義されています。詳細については、こちらをご覧ください。

于 2013-10-19T22:31:10.690 に答える
0

要素の css 幅は (box-sizing css プロパティによる)

if(ボーダーボックスです) 

 css width = element content width + padding + border

if (パディングボックスです)

css width = element content width + padding

If(デフォルトの content-box です)

css width = element content width

高さなど

jQuery .width() は常に要素コンテンツの幅を与えます。

パディング付きの要素の幅と高さが必要な場合は.innerWidth()、 andinnerHeight()メソッドを使用できます。

使用するよりも境界線のサイズを含めたい場合は.outerWidth()、.outerHeight()

于 2013-10-19T17:49:20.260 に答える