Internet Explorer错误地计算td中生成的内容的百分比高度

Question

IE11正在计算表格单元格的高度作为其内容的高度（20px），而不是其背景的高度（100px）。
其他浏览器按预期工作。

我如何在IE中解决这个问题？ 或者：我做错了什么？ 或者：我该如何解决这个问题？

我需要这个，所以我可以在表格单元格后面画一条垂直线。

1。限制

由于我的特定问题的细节，一些解决办法是不可能的。

1.A。高度不恒定

高度不是常数，它取决于另一个单元格上的文本量。

所以我也不能使用固定的行高。如果可以的话，我也可以将固定大小设置为:: before the height。

1.B。无法使用背景图像

我不能通过使用重复的背景图像解决这个问题，因为该行应该在一个居中的图标后面不，所以我使用生成的内容（{{ 1}}和::before）与::after。

2。在线样本

尝试在IE11中打开online sample，在Firefox或Chrome中打开。

请注意，JavaScript会显示 100px高的第一个单元格，背景填充100px。但生成的内容只有~20像素高......

height: calc(50% - 20px);

Answer 1

Internet Explorer内容高度与最接近的元素相关，其中高度以绝对单位设置，例如像素。 如果你想使用％height，你需要在所有父元素上设置高度，这将是html，body，table ....

因为这是不可能的，请使用此技巧来满足您的要求。

"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>