html - IE中表格单元格内的绝对定位

Question

我在 Internet Explorer(特别是 9，但我确信 <9 中也存在该问题)中的表格单元格内存在一些绝对定位问题。我试图强制表格单元格内的 div 占据整个单元格。在 chrome/ff/safari 中使用:

div {
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}

td {
    position: relative;
}

但出于某种原因，IE 的行为完全不同。我根本无法根据表格单元格为 div 提供动态高度。 Here's一个例子来说明我在说什么。它在 chrome/ff/safari 中按我的需要工作，但在 IE 中已损坏。有没有办法让它在 IE 中以相同的方式工作？谢谢!

Answer 1

以防有人对此感兴趣；一个简单的解决方案将解决 IE 10(我当前的目标)上的问题。

您需要有一个嵌套的 div 来定位您的绝对定位元素:

<td>
    <div>
        <a href="#">FULL HEIGHT</a>
    </div>
</td>

然后添加一些 css，包括 IE 的 lil 技巧:

td {
    position: relative;
    height: 1px; // IE FIx
}
td > div {
    height: 100%;
}
td > div a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // Beauty only
    background-color: orange;
    color: white;
    text-decoration: none;
}