テーブルとディビジョンのボックスサイジングが異なるのはなぜですか？ここ

Question

は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のインスペクタはテーブルの計算結果がcontent-boxのbox-sizingであることを示していますので、2番目のdivのように振る舞い、オーバーフローして見苦しいと思っています。なぜ違うのですか？これはHTML/CSS仕様のどこかに文書化されていますか？

Answer 1

はい、CSS2.1はseparated borders modelとテーブルの次の状態：

しかし、HTMLとXHTML1で、<テーブル>要素の幅は、右へ、左境界エッジからの距離でありますボーダーエッジ。

注：CSS3では、この特殊な要件は、UAスタイルシートルールと「ボックスサイジング」プロパティで定義されます。

box-sizingの現在のCSS3定義は、このことについては何も言いませんが、それは基本的に（X）HTMLで意味上記の引用を翻訳し、テーブルはボーダーボックスモデルを使用します。パディングとボーダーは、指定に追加しませんテーブルの幅。 box-sizing性の点で、異なるブラウザは異なり、この特殊なケースを処理するように見える

注：

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

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

• Firefoxの
  -moz-box-sizingborder-boxに設定されています。 content-boxまたはpadding-boxに変更すると、それに応じてサイズが変更されます。

CSS3はまだテーブルボックスのサイジングについて言及していないので、これは驚きではありません。少なくとも、結果は同じです。これは基本的な実装とは異なります。しかし、上記の注釈を踏まえて、私は、Chromeでは、box-sizingプロパティを使用してテーブルのボックスモデルを変更するように見えないため、IEとFirefoxが意図したCSS3の定義に近いと言います。あなたのテーブルには、このモデルを使用していないので、この場合には、それが関連していないのですがcollapsing border modelは、全くパディングを持っていないと

---

テーブル：

を（注）このモデルではその、幅テーブルにはテーブルの境界の半分が含まれます。また、このモデルでは、テーブルには余白がありません（ただし余白はあります）。

Answer 2

だから<table><td><th>要素が動作します。これらの要素はブロックレベルの要素ではありません。

box-sizing:border-boxのように、指定された幅の内側にパディングが含まれています。

参考までに、どこの文書でも見つかりませんでした。