Ie 11, table-cell, height, absolute. Давно я так не матерился, ребята...

Сколько раз себе повторял: нужно беречь свои нервы, нужно меньше стресса, это всего лишь работа.
Но мл*ть!

Проблема: Высота ячеек таблицы в IE11 вычисляется не как в нормальных браузерах.

Есть классическая таблица (display: table, display: table-row и display: table-cell)

У меня есть абсолютно позиционированный псевдоэлемент (черная граница). Я бы хотел, чтобы он всегда был таким же высоким, как и весь <tr>.
Содержимое <td> является динамическим - я не могу контролировать его размер.

Вот код https://jsfiddle.net/y9rh03Lx/.
Откройте его в ie11 и в нормальном браузере


    td {
        overflow: hidden;
        width: 100px;
        position: relative;
    }

    div {
        overflow: visible;
    }
    div:before {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #333;
        content: "";
    }


    <table>
      <tbody>
        <tr>
          <td>
              <div>
              </div>
          </td>
          <td>
              a <br>a <br>a <br>a <br>
          </td>
        </tr>
      </tbody>
    </table>

IE-11
IE 11

Нормальный браузер IE 11

Не верьте "решениям", в которых есть JS код. Это костыльное решение! Это проблема отрисовки, она должна решаться исключительно стилями.

Решение оказалось простым. Добавим 2 строчки


    td {
        overflow: hidden;
        width: 100px;
        position: relative;
        height: 1px; // <--
    }

    div {
        overflow: visible;
        height: calc(100%); // <--
    }
    div:before {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #333;
        content: "";
    }

Итог: https://jsfiddle.net/y9rh03Lx/3/

Всем добра.