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/。你需要再次調整確切的位置，但是你現在重疊工作。