html - 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 个多小时了，我们的开发部门没有人知道可能是什么问题。

我对该主题进行了一些研究，并发现 TD 内的相对定位是一件坏事。我尝试遵循建议并在其中使用相对布局制作一个 div 容器，但布局最终像这样（在 Firefox 中）：

我能做些什么来解决这个问题？

Answer 1

演示

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;
}