8

スタイルシートにCSSLintを使用しましたが、理解できないという警告が1つ表示されます。

このCSSコードを検討してください。

div {
    width: 50px;
    height: 50px;
    border: 1px solid;
}

CSSLintは、次のように述べています。「壊れたボックスモデル：境界線付きの高さを使用します。」「壊れたボックスモデル：境界線付きの幅を使用します。」

境界線付きの幅/高さを使用しないのはなぜですか？

4

3 に答える 3

6

CSSLintは、ボックスモデルの意味を理解する必要がなく、読者の周りに一連のグッドプラクティスを適用しようとしていると思います。結局のところ、私はボックスモデルを完全に理解しており、cssが52pxの「実際の」幅/高さを生成することを理解しています。これはおそらく誤解を防ぐためです。

個人的には無視します。エラーではなく「警告」と書かれているため、主観的です。

于 2011-07-21T13:05:17.193 に答える
2

これは警告であり、エラーではないので、問題ありません。

警告しているのは、標準のボックスモデルでは、の幅borderが指定した高さ/幅に追加されることです。

したがって、この例では、ページ上のボックスの実際の高さと幅は52ピクセルになります。

CSSLintは、これに気付かない可能性があるため、これについて警告しています。そのため、レイアウトが意図したとおりになっていない可能性があります。

これを認識していて、レイアウトで考慮している場合は、CSSLintの[壊れたボックスモデルに注意する]チェックボックスをオフにして、この警告を抑制することができます。

ちなみに、同じことが当てはまりますpadding。

于 2011-07-21T13:09:19.037 に答える
0

古いInternetExplorerバージョン（他のすべてのものとは異なります）は、物の幅を計算する別の方法を使用します。古いIEはパディングと境界線を含むボックスを測定し、新しいものはパディングと境界線を含まないコンテンツのサイズを測定しました。サイトが両方のタイプのボックスモデルで一貫して表示されるようにするには、同じ要素にスタイルのパディング/境界線と幅/高さを適用しないように選択できます。

  1. https://plus.google.com/103013777355236494008/posts/FqUEyyvT4RH
  2. http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
于 2012-04-18T14:46:33.020 に答える