html - DIV 在表格单元格上(Firefox 问题)

Question

我希望 div 在鼠标悬停事件中出现在表格单元格上(填充单元格的整个空间，div width=100% and height=100%)。

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

Code example on jsfiddle

Answer 1

您在 td 元素上使用 position: relative;。 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/ .您需要再次调整精确定位，但您的叠加现在可以使用了。