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.
Почему высота постоянно изменяется?