Internet Explorer incorrectly calculates percentage height for generated content in td

Question

IE11 is calculating the height of a table cell as the height of its content (20px) and not as the height of its background (100px).
Other browsers work as expected.

Answer 1

Internet Explorer content height is related to closest element with height set in absolute units, such as pixels. If you want to use % height, you need to set the height on all parent elements, this will be html, body, table ....

Cause this is not possible for you, use this trick to meets your requirements.

"use strict";
var borked = document.getElementById("borked");
var td = document.createElement("td");
td.textContent = "(1st cell seems to be " + borked.clientHeight + "px tall)";
borked.parentElement.appendChild(td);

#borked {
    background: yellow;
    position: relative;
    height: 100%;
    overflow: hidden;
}
#borked~* {
    height: 100px;
}
#borked::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    margin: -99999em;
    padding: 99999em;
    background-color: rgba(0, 255, 0, 0.3);
}

<table>
    <tr><td id="borked">abc</td><td>def</td></tr>
</table>