Мне нужно динамически построить таблицу для хранения некоторых данных.
Я следовал обычному подходу использования div сdisplay: table, display: table-row а такжеdisplay: table-cell:

.tab {
    display: table;
    height:100%;
    width: 200px;
}

.row {
    height: 100%;
    display: table-row;
}

.elem {
    border: 1px solid black;
    vertical-align: top;
    display: table-cell;
    height:100%;
    background: blue;
}

.content {
    height: 100%;
    background: greenyellow;
}

<div class="tab">
    <div class="row">
        <div class="elem">
            <div class="content">
                Content
            </div>
        </div>
        <div class="elem">
            <div class="content">
                Longer content that will need to wrap around eventually you know and don't you hate it when things don't end as you expect them octopus
            </div>
        </div>
    </div>
</div>

Или посмотреть на Jsfiddle.

В большинстве браузеров я получаю ожидаемый результат:

Тем не менее, в IE8 (и, возможно, более поздних версиях, я не тестировал более поздние версии), я получаю следующее:

height: 100% установить на DIV окружении«Содержание» игнорируется

В соответствии сМогу ли я использовать, IE8 должен предлагать полную поддержку связанных свойств отображения.

Я просмотрел ряд похожих вопросов по SO, но не нашел работающего решения: большинство решений либо основаны на Javascript (которого я стараюсь избегать), либо использую фиксированную высоту (там же, предыдущий), либо не работают на IE8.