Perché il dimensionamento della casella è diverso in base alla tabella vs div?

Question

Ecco il codice 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> 

e sembra che questo nel mio Chrome:

credo di aver capito tutto fino all'ultimo. Il mio ispettore Chrome mostra che lo stile box-sizing calcolato della tabella è content-box, quindi mi aspetto che si comporti come il secondo div e che l'overflow e l'aspetto brutti. Perché è diverso? Questo è documentato da qualche parte nelle specifiche HTML/CSS?

Answer 1

Sì, Stati CSS2.1 quanto segue per le tabelle con la separated borders model:

Tuttavia, in HTML e XHTML1, la larghezza della <tavolo> elemento è la distanza dal limite del bordo di sinistra alla destra bordo

Nota: Nei CSS3 questo requisito peculiare sarà definito in termini di regole del foglio di stile UA e della proprietà "ridimensionamento della casella".

La definizione CSS3 attuale box-sizing non dice nulla su questo, ma tradurre la citazione di cui sopra significa sostanzialmente in HTML (X), le tabelle utilizzare il modello di confine-box: imbottitura e le frontiere non aggiungono al specificato larghezza di un tavolo.

Si noti che, in termini di proprietà box-sizing, diversi browser sembrano gestire questo caso particolare in modo diverso:

• Chrome
  box-sizing è impostato al valore iniziale, content-box; cambiandolo non ha alcun effetto. Né redecare lo standard box-sizing: content-box all'interno degli stili in linea, ma ciò dovrebbe essere previsto. In entrambi i casi, Chrome sembra forzare la tabella a utilizzare sempre il modello border-box.

• IE
  box-sizing è impostato su border-box; cambiandolo a content-box si comporta come il secondo div.

• Firefox
  -moz-box-sizing è impostato su border-box; cambiandolo a content-box o padding-box si ridimensiona di conseguenza.

Poiché il CSS3 non ha ancora menzionato il dimensionamento della tabella, questo non dovrebbe sorprendere. Per lo meno, il risultato è lo stesso - è solo l'implementazione sottostante che è diversa. Ma dato ciò che la nota dice sopra, direi che IE e Firefox sono più vicini alla definizione CSS3, poiché in Chrome non riesci a cambiare il modello di box di una tabella usando la proprietà box-sizing.

---

tabelle con il collapsing border model non hanno imbottitura a tutti, anche se in questo caso non è rilevante dal momento che la tabella non utilizzare questo modello:

Si noti che in questo modello, la larghezza di la tabella include metà del bordo del tavolo. Inoltre, in questo modello, una tabella non ha padding (ma ha margini).

Answer 2

Ecco come funziona <table><td><th> elementi. Questi elementi non sono elementi a livello di blocco.

Contiene il riempimento all'interno della larghezza specificata come farebbe lo box-sizing:border-box su altri elementi a livello di blocco.

FYI, non l'ho trovato da nessuna parte documento.