Firefox中奇怪的定位问题

Question

我有以下代码示例：http://jsfiddle.net/RZUnh/3/

这是那些不想去小提琴连接的人的标记。

<table border="1">
    <tr>
        <td>
            <img src="http://static.tumblr.com/xicugzn/8YDm6eu1c/aviarios-del-caribe-sloth-sanctuary.10968.large_slideshow.jpg" height="150" />
            <div class="child">Overlay</div>
        </td>
        <td>
            <img src="https://leerburg.com/Photos/bamboostick874.gif" height="250" />
            <div class="child">Overlay</div>
        </td>
    </tr>
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

这是CSS。

td {
    min-height:70px;
    position:relative;
}

.child {
    background-color: rgba(255, 0, 0, .5);
    position: absolute;
    right:0px;
    bottom: 5px;
}

在Chrome，IE 10和Safari中，它会产生以下布局：

但是，在Firefox中，结果完全不同（请注意“叠加”如何在实际表格之外）：

我已经摆弄了这个问题超过3个小时了，我们的开发部门没有人知道可能是什么问题。

我做了some research on the subject并且发现TD内部的相对定位是一件坏事。我尝试按照建议并在其中使用相对布局制作div容器，但是布局最终会像这样（在Firefox中）：

我该怎么做才能解决这个问题？

Answer 1

DEMO

在div：

中添加了包装td

<div class="wrapper">
  <img />
  <div class="child">Overlay</div>
</div>

您可能需要对css中最高图像的高度进行硬编码

table {
    position:relative;
}
div.wrapper {
    height:100%;
    min-height:255px; /* height of tallest image (250px) + .child bottom value (5px) */
    position:relative;
}
div.child {
    background-color: rgba(255, 0, 0, .5);
    position: absolute;
    right:0px;
    bottom: 5px;
}