17

HTML は次のとおりです: http://jsfiddle.net/jC8DL/1/

<div style='width:300px;border:1px solid green'>
  <div>Outer div</div>
  <div style='width:100%;border:1px solid red;margin:10px;'>
    Inner div, 10px margin.
  </div>
  <div style='width:100%;border:1px solid red;padding:10px;'>
    Inner div, 10px padding.
  </div>
  <div style='width:100%;border:1px solid red;padding:10px;box-sizing:border-box'>
    Same, with box-sizing: border-box
  </div>
  <table style='width:100%;border:1px solid red;padding:10px;'>
    <tr><td>Inner table, 10px padding</td></tr>
  </table>
</div>

そして、私のChromeでは次のようになります。

ここに画像の説明を入力

最後まで全部理解できたと思います。私の Chrome インスペクタは、テーブルの計算されたbox-sizingスタイルが であることを示しているcontent-boxので、2 番目の div のように動作し、オーバーフローして見苦しくなると思います。なぜ違うのですか？これは HTML/CSS 仕様のどこかに文書化されていますか?

4

2 に答える 2

21

はい、CSS2.1 では、境界線モデルが分離されたテーブルについて次のように述べています。

ただし、HTML および XHTML1 では、<table> 要素の幅は、境界の左端から境界の右端までの距離です。

注: CSS3 では、この固有の要件は、UA スタイル シートの規則と「box-sizing」プロパティに関して定義されます。

の現在の CSS3 定義でbox-sizingはこれについて何も述べられていませんが、上記の引用を翻訳すると、基本的に (X)HTML では、テーブルはボーダー ボックス モデルを使用することを意味します。パディングとボーダーはテーブルの指定された幅に追加されません。

box-sizingプロパティに関しては、ブラウザーが異なれば、この特殊なケースの処理も異なるように見えることに注意してください。

  • Chrome
    box-sizingは初期値content-box;に設定されています。変更しても何の効果もありません。box-sizing: content-boxインライン スタイル内で再宣言することもできませんが、これは予期されることです。いずれにせよ、Chrome はテーブルが常にボーダー ボックス モデルを使用するように強制しているようです。

  • IE
    box-sizingは に設定されていborder-boxます。に変更するとcontent-box、2 番目の のように動作しますdiv。

  • Firefox
    -moz-box-sizingは に設定されていborder-boxます。に変更するcontent-boxかpadding-box、それに応じてサイズを変更します。

CSS3 はまだテーブル ボックスのサイズについて言及していないため、これは驚くべきことではありません。少なくとも、結果は同じです。異なるのは、基礎となる実装だけです。しかし、上記のメモに書かれていることを考えると、Chrome ではプロパティを使用してテーブルのボックス モデルを変更できないように見えるため、IE と Firefox は意図した CSS3 定義に近いと言えbox-sizingます。

折りたたみボーダー モデルのテーブルにはパディングがまったくありませんが、この場合、テーブルはこのモデルを使用していないため関係ありません。

このモデルでは、表の幅には表の枠線の半分が含まれることに注意してください。また、このモデルでは、テーブルにパディングはありません (ただし、マージンはあります)。

于 2013-09-28T16:31:23.033 に答える
3

それが<table> <td> <th>要素の仕組みです。これらの要素は、ブロック レベルの要素ではありません。

box-sizing:border-box他のブロック レベル要素の場合と同様に、指定された幅の内側にパディングが含まれます。

参考までに、どこにもドキュメントが見つかりませんでした。

于 2013-09-28T16:29:30.020 に答える