Почему размер окна зависит от таблицы и div?

Здесь 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:

enter image description here

Думаю, я все понимаю до последнего. Мой инспектор Chrome показывает таблицу, рассчитанную box-sizing style content-box, поэтому я ожидаю, что она будет вести себя как второй div, а переполнение и выглядит уродливым. Почему это другое? Является ли это документированным где-то в спецификации HTML/CSS?

Ответы

Ответ 1

Да, в 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 заставляет его вести себя как второй div.

  • Firefox
    -moz-box-sizing установлен на border-box; изменение его на content-box или padding-box вызывает его изменение соответственно.

Так как CSS3 еще не упоминает размер таблицы, это не должно удивлять. По крайней мере, результат один и тот же - это только основная реализация, которая отличается. Но, учитывая сказанное выше, я бы сказал, что IE и Firefox ближе к намеченному определению CSS3, поскольку в Chrome вы не можете изменить модель таблицы с использованием свойства box-sizing.

Таблицы с схемой разворачивания границ не имеют отступов вообще, хотя в этом случае это не имеет значения, так как ваша таблица не использует эту модель:

Обратите внимание, что в этой модели ширина таблицы включает половину границы таблицы. Кроме того, в этой модели таблица не имеет отступов (но имеет поля).

Ответ 2

Как работает <table> <td> <th>. Эти элементы не являются элементами уровня блока.

Он содержит прописку внутри заданной ширины, как это делал бы box-sizing:border-box на других элементах уровня блока.

FYI, я не нашел его в любом документе.