У меня странное поведение с DIV-Table
Вот jsFiddle с моим упрощенным примером. Соответствующая часть CSS заключается в следующем:
.cell { отображение: таблица-ячейка; ширина: 35 пикселей; высота: 12 пикселей; размер шрифта: 1px; переполнение: скрыто; высота строки: 1em; }
На самом деле font-size установлено на 1px.
В Firefox, если увеличить размер шрифта (например, с помощью инспектора) до 13px, высота ячеек уменьшится, а не увеличится. При превышении этого порога высота ячеек начинает увеличиваться, чтобы вместить тестовые строки. height свойство полностью игнорируется.
В Chrome поведение почти одно из желаемых (увеличение font-size приводит к непрерывному увеличению высоты ячеек), но, опять же, свойство height кажется полностью игнорируемым.
Если я не установлю display: table-cell;, увеличение font-size не повлияет на высоту DIV, и в конечном итоге слишком большой текст будет просто скрыт благодаря overflow:hidden.
ОБНОВЛЕНИЕ:
Я только что обнаружил, что форсирование vertical-align делает поведение Firefox похожим на поведение Chrome (высота ячеек остается фиксированной до тех пор, пока текст не уместится). внутри них). Я не знаю почему, но кажется, что для Firefox необходимо принудительно использовать это свойство.
В любом случае, остается другая потребность: как избежать того, что увеличение font-size над 13px приведет к игнорированию ячеек height и автоматической настройке?
height:100%;доtable-cellделает высоту DIV зависимой только отfont-sizeи в Firefox. Но это не решение. Я хотел бы поддерживать высоту FIXED div. - person Luca Detomi schedule 29.05.2015height:20pxи содержимым высотой 30 пикселей увеличится до 30 пикселей. Это нормальное и ожидаемое поведение. С другой стороны, очень странным является тот момент, когда высота уменьшается при увеличении размера шрифта. Это может быть даже баг... - person Mr Lister schedule 29.05.2015