表格单元格上的DIV（Firefox问题）

Question

我希望div在鼠标悬停事件中出现在表格单元格上（填充单元格的整个空间，div宽度= 100％，高度= 100％）。

在IE8和Chrome中，它看起来像我想要的那样，但在Firefox中，div出现在表格单元格的边界之外。

Code example on jsfiddle

Answer 1

您在position: relative;元素上使用td。 Firefox会忽略表格单元格中的此值，请参阅this bug。

为了规避这个行为，您可以创建一个td的子项作为包装器。

<td>
    <div class="table-cell-wrapper">Your absolute positioned content here</div>
</td>

使用此CSS，您可以为包装器提供表格单元格的尺寸。

.table-cell-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

我在这里更新了你的jsfiddle http://jsfiddle.net/RDq8Q/2/。你需要再次调整确切的位置，但你现在可以重叠。