Подтвердить что ты не робот

Использование display: table-cell без отображения display: table

Я пытаюсь создать семантически корректную веб-страницу HTML 5 с использованием CSS 3. Я создал следующую разметку, которая существует в корне моего элемента body. Применение display:table-cell к элементам aside и section приводит к тому, что они будут столбцами, как мне бы хотелось. Тем не менее, я не содержал элемент для применения display:table to. Можно ли использовать display:table-cell, если элемент, к которому он применяется, не содержится в display:table? Если нет, то есть лучший механизм для создания макета столбца с этими элементами без использования float?

<aside>
    <nav>
       <ul>
           <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
       </ul>
    </nav>
</aside>
<section>
    Content goes here
</section>
4b9b3361

Ответ 1

Да, это действительно так. Прочитайте 17.2.1 спецификации CSS2 относительно анонимных объектов таблицы. Более конкретно, эти разделы...

Создание отсутствующих дочерних оберток:

  • Если дочерний элемент C таблицы или Поле "inline-table" не подходит table, затем сгенерируйте анонимный стол-столбец вокруг C и все последовательные братья и сестры C, которые не соответствующие детям таблицы.
  • Если ребенок C поля группы строк не является 'table-row', затем сгенерируйте анонимный стол-столбец вокруг C и все последовательные братья и сестры C, которые а не "таблицы-строки".
  • Если ребенок C поле "таблица-строка" не является "table-cell" , затем сгенерировать анонимная ячейка "table-cell" вокруг C и всех последовательных братьев и сестер C, которые не являются ячейками "table-cell" .

Создать отсутствующих родителей:

  • Для каждого поля "table-cell" C в последовательность последовательной внутренней таблицы и "братьев-подписчиков", если C parent не является "table-row", тогда создать анонимный столбец "таблица-строка" вокруг C и всех последовательных братьев и сестер из C, которые являются ячейками "table-cell" .

  • Для каждый правильный дочерний элемент C в последовательность последовательной надлежащей таблицы детей, если C неверно генерировать анонимную "таблицу" или поле "inline-table" T вокруг C и все последовательные братья и сестры C, которые надлежащим детям таблицы. (Если C родительский является "встроенным" полем, тогда T должен быть поле "встроенный стол"; в противном случае он должен быть "таблицей".)

    • "Таблица-строка" неверно, если его родитель ящик группы строк или "таблица" или 'inline-table'.
    • "Столбец-столбец" коробка неверна, если ее родитель ни поле "стол-столбец-группа", ни поле 'table' или 'inline-table'.
    • Строка групповой ящик, поле "столбец-столбец", или "стол-подпись" неверно если его родительский элемент не является полем "таблица" ни в поле "встроенный стол".

Ответ 2

Из спецификации CSS2.1:

17.2.1 Анонимные табличные объекты

Языки документа, отличные от HTML, могут не содержать всех элементов в модель таблицы CSS 2.1. В этих случаях "отсутствующие" элементы должны чтобы модель таблицы работала. Любой элемент таблицы автоматически генерирует необходимые анонимные объекты таблицы вокруг сама по себе, состоящая по меньшей мере из трех вложенных объектов, соответствующих элемент 'table'/'inline-table', элемент 'table-row' и элемент "table-cell". Отсутствующие элементы генерируют анонимные объекты (например, анонимные поля в макете визуальной таблицы)

...

Это означает, что если мы используем display: table-cell; без предварительного размещения ячейки в блоке, установленном на display: table-row;, строка будет подразумеваться - браузер будет действовать так, как будто заявленная строка на самом деле там.

Так что да, использование display:table-cell без содержания display:table действительно создает правильный CSS. Это не означает, что его поведение стабильно. Даже сегодня (февраль 2016 года) поведение display:table и display:table-cell остается непоследовательным во всех браузерах. См. Непоследовательное поведение отображения: таблица и отображение: table-cell для некоторых примеров.