Dlaczego rozmiar pudełkowy działa inaczej w stosunku do stołu i elementu div?

Question

Oto 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> 

A wygląda to w moim Chrome:

Myślę, że rozumiem wszystko, aż do ostatniego. Mój inspektor Chrome pokazuje, że styl obliczany w tabeli to w stylu content-box, więc oczekuję, że będzie zachowywał się jak drugi element div, a przepełnienie i wygląd będą brzydkie. Dlaczego jest inaczej? Czy jest to udokumentowane gdzieś w specyfikacji HTML/CSS?

Answer 1

Tak, stany CSS2.1 następujących tabel z separated borders model:

Jednak w HTML i xhtml1, szerokość <tabeli> elementu to odległość od lewej krawędzi obramowania w prawo krawędź granicy.

Uwaga: Ten specyficzny wymóg zostanie zdefiniowany w CSS3 zgodnie z regułami arkusza stylów UA i właściwością "rozmiaru boksu".

Obecna definicja CSS3 z box-sizing nie mówi nic o tym, ale tłumacząc powyższy cytat to w zasadzie oznacza w (X) HTML, stoły użyć modelu border-box: wyściółka i granice nie sumują się do określonego szerokość stołu.

Należy zauważyć, że jeśli chodzi o własności box-sizing, różnych przeglądarek wydają się obsługiwać ten szczególny przypadek inaczej:

• Chrome
  box-sizing jest ustawiona na wartość początkową, content-box; zmiana nie ma żadnego wpływu. Nie można również redeclarować box-sizing: content-box w stylach wstawianych, ale należy się tego spodziewać. Tak czy inaczej, wydaje się, że Chrome zmusza tabelę do używania zawsze modelu border-box.

• IE
  box-sizing jest ustawiony na border-box; zmiana go na content-box powoduje, że zachowuje się tak jak drugi div.

• Firefox
  -moz-box-sizing jest ustawiony na border-box; zmiana go na content-box lub padding-box powoduje odpowiednią zmianę rozmiaru.

Ponieważ w CSS3 nie ma jeszcze wzmianki o wielkości pudełka, nie powinno to być zaskoczeniem. Wynik jest co najmniej taki sam - tylko podstawowa implementacja jest inna. Ale biorąc pod uwagę to, co napisano powyżej, powiedziałbym, że IE i Firefox są bliższe planowanej definicji CSS3, ponieważ w Chrome nie można zmienić modelu pudełkowego tabeli za pomocą właściwości box-sizing.

---

Stoły z collapsing border model nie mają wyściółki w ogóle, choć w tym przypadku nie jest to istotne, ponieważ tabela nie używa tego modelu:

pamiętać, że w tym modelu, szerokość tabela zawiera połowę granicy tabeli. Również w tym modelu tabela nie ma dopełnienia (ale ma marginesy).

Answer 2

W ten sposób działają elementy <table><td> . Te elementy nie są elementami blokowymi.

Zawiera wypełnienie wewnątrz danej szerokości, takie jak box-sizing:border-box, które można wykonać na innych elementach poziomu bloku.

FYI, nie znalazłem go w dowolnym miejscu.