Firefox скрывает таблицы без содержимого и не устанавливает высоту

У меня есть пустой table или div с display:table:

Если теперь добавить границу в таблицу - даже если нет содержимого - я бы ожидал увидеть границу.

В Chrome и IE есть граница. В Firefox - граница занимает пространство, но она скрыта.

DEMO

table,
div {
  width: 200px;
  background: tomato;
  margin-bottom: 20px;
  border: 2px solid black;
}
div + div,
table + table {
  background: green;
  height: 200px;
}
div {
  display: table;
}

<div></div>
<div></div>

<table></table>
<table></table>

Ответ 1

Обходной путь для этой ошибки заключается в использовании CSS-контента для элементов. Даже установка пустой строки решает проблему, и поскольку она пуста, от этого не должно быть никаких негативных последствий.

Обход проблемы:

table:after,
div:after {
    content: "";
}

Рабочий пример (JSFiddle):

table, div {
   width: 200px;
   background: tomato;
   margin-bottom: 20px;
   border: 2px solid black;
}
div + div, table + table {
    background: green;
    height: 200px;
}

div {   
    display:table;    
}
table:after,
div:after {
    content: "";
}

<div></div>
<div></div>

<table></table>
<table></table>

Ответ 2

Выделение пустых элементов в инспекторе показывает, что пустые поля таблицы отображаются с использованием используемой высоты, равной -(border-top-width + border-bottom-width). Явная абсурдность этого поведения в основном подтверждает его как ошибку, но если вам абсолютно нужна ссылка, spec говорит:

Высота таблицы задается свойством 'height' для элемента 'table' или 'inline-table'. Значение "auto" означает, что высота представляет собой сумму высот строк плюс расстояние между ячейками или границы.

Как вы можете видеть, он говорит "плюс" границы. Не "минус".

Обратите внимание, что поля действительно там, так как они по-прежнему имеют поля. По какой-то причине они просто визуализируются с отрицательной высотой.

Ответ 3

Установка table, div в height: 0; делает трюк для меня, странный материал, но если он не нуждается в каком-либо контенте, это должно быть хорошо.

Ответ 4

Из того, что я заметил, Firefox не допускает min-height для элементов с использованием стиля display: table. Поэтому рекомендуется изменить min-height на height, и он должен работать. Я упомянул об этом Bug

Ответ 5

Вам нужно определить высоту, FF автоматически не устанавливает высоту, если она не определена, поэтому он знает, что они имеют 2px + 2px границ, и он удалил ее с помощью высоты набора до -4px, как вы можете видеть на расчетный инспектор:

Но Chrome понимает, что у них нет высоты, поэтому он установил 0:

Добро пожаловать в разницу между браузерами!

Ответ 6

Указание высота будет соответствовать вашим потребностям.