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

Question

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

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

Answer 1

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

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

1. Если ребенок C «таблицы» или поле 'inline-table' не является правильным дочерний стол, затем сгенерировать анонимное поле 'table-row' вокруг C и все последовательные братья и сестры, которые являются не правильная таблица детей.
2. Если ребенок C группы строк строки не является поле 'table-row', затем сгенерируйте анонимное поле 'table-row' вокруг C и все последовательные братья и сестры, которые являются не «таблицы-строки».
3. Если ребенок С поле 'table-row' не является 'table-cell', затем сгенерировать анонимное поле 'table-cell' вокруг C и все последовательные братья и сестры С, которые не являются ячейками таблицы-ячейки.

Создать пропавших родителей:

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

2. Для каждый правильный ребенок таблицы C в последовательность последовательной правильной таблицы дети, если C неправильно, то создать анонимную «таблицу» или поле «встроенный стол» T вокруг C и все последовательные братья и сестры, которые являются Правильный стол детей. (Если родитель C это «встроенный» блок, то T должен быть поле «встроенный стол»; в противном случае это должно будь «настольным» ящиком.)

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

Answer 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 остается несовместимым во всех браузерах.См. Непоследовательное поведение отображения: таблица и отображение: ячейка таблицы для некоторых примеров.