При написании некоторого CSS с использованием display: table / table-row / table-cell я столкнулся с некоторым поведением, которое я не понимаю, но согласуется с Chrome и Firefox. Я свел его к следующим двум фрагментам, подчеркивающим разницу:
Правила укладки очень простые:
* { box-sizing: border-box; border: none; margin: 0; }
.stack, .flow {
width: 100%;
display: table;
}
.stack > * {
display: table-row;
}
.flow > * {
display: table-cell;
}
.w-100 { width: 100%; }
HTML грубо:
<div class="flow">
<div>L</div>
<input type="text"class="w-100" placeholder="M" />
<div>R</div>
</div>
Единственная разница во второй ссылке состоит в том, что последний div с буквой R заменяется на ‹button› (ввод также показывает такое же поведение). Оба должны отображаться как ячейка таблицы, обернутая анонимной строкой таблицы, и я думаю, что она должна выглядеть как первый фрагмент независимо от того. Должно быть, мне не хватает чего-то очевидного, чтобы объяснить эту разницу, так может ли кто-нибудь объяснить, почему эти два фрагмента отображаются по-разному?
Интересно, что Edge отображает их точно так же, как я изначально ожидал.
Изменить: если вы ограничиваете элементы L и R фиксированным размером, а для строки в целом установлено значение 100%, ячейка M / средняя должна расширяться, чтобы соответствовать всей ширине, но она не работает должным образом ни в Хром. Эти два фрагмента также отображаются по-разному по какой-то необъяснимой причине:
Кажется, что рендеринг работает стабильно только в том случае, если все элементы, используемые в качестве ячейки таблицы, являются div, например: https://codepen.io/anon/pen/mxKreZ
