DIV在表格单元格（Firefox问题）

Question

我希望div在鼠标悬停事件上出现在表格单元格上（填充单元格的整个空间，div宽度= 100％和高度= 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/。你需要再次调整确切的位置，但是你现在重叠工作。