html - 不能使子元素与父元素 IE 的高度相同

Question

我正在尝试使用 CSS 使表格单元格的子元素具有表格单元格的高度和宽度。这是html：

<tr>
    <td>
        <div class="yellowDiv"></div>
    </td>
    <td></td>
    <td></td>
    <td></td>
</tr>

这是我正在使用的 CSS：

    table tbody tr td:nth-child(1){
        position: relative;
    }

    table tbody tr td div.yellowDiv{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: yellow;
    }

上面的代码在 Chrome 中正确呈现，但在 IE 中不正确（仅与 IE 9 和 10 有关）。我也尝试过设置display: table-cell;元素div但无济于事。我也尝试将div元素的高度设置为 100%，但这也没有奏效。

Answer 1

绝对定位的元素不再是布局的一部分。他们有自己的布局上下文。因此他们无法知道他们的父元素有多大。

您需要使用 JavaScript 来解决这个问题，或者考虑一下为什么需要绝对定位。

您可以使用：

.yellowDiv {
    background-color:#ffff00;
    height:100%;
}