Почему изменение позиционирования элемента table-row от "static" до "absolute" до "static" приводит к постоянному изменению высоты?

A display: table-row div с height: 75px вложен внутри div display: table с height: 100px

Высота ребенка 100px изначально с position: static

Изменив расположение дочернего элемента на absolute, а затем обратно на static, высота ребенка постоянно изменяется с 100px на 75px.

Это происходит только в том случае, если родительский элемент является таблицей, а дочерний элемент является табличной строкой и, по-видимому, только в WebKit; firefox/IE меняют обратно на высоту 100 пикселей, но Chrome/Safari этого не делают.

<div id="div1">
    <div id="div2">
        Hello, world!
    </div>
</div>

#div1
{
    display: table;
    height: 100px;
}

#div2
{
    display: table-row;
    height: 75px;
}

Здесь jsfiddle с примером и выходом типа/высоты позиционирования.

Я изначально заметил это, возившись с CSS-свойствами в инструментах разработчика Chrome, поэтому это не что-то конкретное для jsfiddle или jQuery.

Почему высота постоянно изменяется?

Ответы

Ответ 1

Корень проблемы заключается в том, что элементы таблицы и таблицы-строки заданы высотой, но высота таблицы больше высоты таблицы. Поскольку других строк нет, это приведет к поведению undefined. Из spec:

CSS 2.1 не определяет, как распределяется лишнее пространство, когда свойство "высота" приводит к тому, что таблица будет выше, чем в противном случае.

Следующее - это то, что, по-видимому, происходит, по крайней мере, исходя из моих собственных наблюдений:

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

  • Когда вы полностью позиционируете таблицу-таблицу, ее вычисленная высота изменяется на указанный 75px, потому что абсолютное позиционирование превращает его в блок-блок, и поэтому его размеры рассчитываются соответствующим образом.

  • Когда вы возвращаете элемент в его статическое положение, он возвращается к таблице-строке (как следует), но Chrome/Safari по какой-то причине сохраняет 75px, когда вы сделали его блоком в то время как другие браузеры пересчитывают высоту в соответствии с таблицей, снова игнорируя ее указанную высоту.

Как это технически undefined поведение, можно ли сказать, что любой из браузеров имеет ошибочное или неправильное поведение. Тем не менее, я собираюсь выйти на конечность и сказать, что это может быть связано с тенденцией Chrome, чтобы плохо испортиться при переплаве и рецензировании, так как вы ожидаете, что браузер вернет все свойства и правильно перекрасит макет, когда вы отмените одно изменение свойства - то, что Chrome, как известно, плохо.

В качестве альтернативы, как упоминалось в комментариях, это может иметь какое-то отношение к анонимным табличным объектам. Спецификация не говорит, что пустая таблица должна иметь анонимную строку и ячейку, но похоже, что Chrome может создавать один, чтобы заменить таблицу, когда вы ее сначала позиционируете, но забываете удалить ее после того, как вы вернете ее обратно.

Например, если вы добавите какой-то голый текст в качестве дочернего элемента вашей таблицы, который браузер затем обернет в поле анонимной строки для спецификации:

<div id="div1">
    Anonymous row
    <div id="div2">
        <p>Hello World!</p>
    </div>
</div>

Каждый браузер будет сообщать высоту #div2 как 75px. Предположительно, оставшееся пространство занято анонимной строкой но, к сожалению, я недостаточно знаком с моделью таблицы CSS, чтобы прокомментировать ее.