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 有关)。我还尝试为 div 元素设置 display: table-cell; 但无济于事。我还尝试将 div 元素的高度设置为 100%，但这也没有用。

Answer 1

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

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

您可以使用:

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