在 Firefox 中的 TD 内包含绝对定位的 100% 宽度 DIV答案

【问题标题】：Contain absolutely positioned 100% width DIV inside a TD in Firefox在 Firefox 中的 TD 内包含绝对定位的 100% 宽度 DIV
【发布时间】：2014-06-05 17:37:21
【问题描述】：

我发现了几个解决类似问题的问题，但每个解决方案都有其特殊性，使其无法应用于这种情况......

我的问题是我想要一个绝对定位的 100% 宽度的 div 在表格单元格内。我不能在任何地方使用固定的宽度或高度，因为所有内容的宽度和高度都可能不同。我希望 div 从单元格高度的底部定位，这受下一个单元格中内容的（可变）高度的影响。

下面的代码在 IE8（是的，仍然必须支持它...）、IE11 和 Chrome 中运行良好——红色 div 保留在左侧表格单元格中。然而，在 Firefox 中，div 的大小实际上是根据 TABLE 的宽度来调整的，覆盖了右侧单元格的一部分。

我该怎么做才能让它在 Firefox 中运行？

演示：http://jsfiddle.net/AGYGH/

HTML：

<table id="OuterTable" border="1">
    <tr>
        <td id="TableCell">
            <table id="InnerTable" border="1">
                <tr>
                    <td>Dummy text of varying length</td>
                    <td>Dummy</td>
                </tr>
            </table>
            <div id="AbsoluteDiv">
                <div id="InnerDivLeft">Left Div</div>
                <div id="InnerDivRight">Right Div</div>
            </div>
        </td>
        <td>
            <select multiple="multiple" size="10">
                <option>Varying length options</option>
            </select>
        </td>
    </tr>
</table>

CSS：

#OuterTable {
    position:relative;
}
#TableCell {
    vertical-align:top;
    position:relative;
}
#AbsoluteDiv {
    background-color:red;
    position:absolute;
    width:100%;
    bottom:30px;
}
#InnerDivLeft {
    float:left;
}
#InnerDivRight {
    float:right;
}

【问题讨论】：

那是因为position:relative 对table-*-group、table-row、table-column、table-cell 和table-caption 元素的影响是未定义的。跨度>
尝试用div 元素包装该单元格的内容，如下所示：jsfiddle.net/AGYGH/7
@Hashem ：我了解 undefined 部分，虽然它在 IE 和 Chrome 中按预期工作，但我仍然想要 Firefox 的解决方案。至于您示例中的包装器 - 它修复了宽度问题，但 Firefox 然后显示包含单元格上方的红色 div...

标签： html css firefox

【解决方案1】：

我也遇到过这个问题。根据规范，表格单元格无法定位。这意味着 FireFox 正在这样做正确，而其他所有人都在“正确”地这样做。

有点老套，但你总是可以将 div 与“display: table-cell”一起使用，然后将它们相对定位。

This article 有一个很好的 JS 替代方案。

【讨论】：

不确定display:table-cell（尝试但没有成功），但感谢 JS 替代方案 - 因为我已经使用 jQuery，所以这是赢家！

【解决方案2】：

感谢 Seth 向我介绍 JavaScript 解决方案，该解决方案的另一个好处是还可以在我的“现实世界”使用中修复 IE 上的小填充/边距问题。

所以，我用<div class="wrapper"> 包装了<td id="TableCell"> 的全部内容（如Hashem 建议的那样），并使用jQuery 将其高度调整为表格单元格的实际高度：

$('#TableCell div.wrapper').height($('#TableCell').height());

修改后的演示（添加了蓝色的包装）：http://jsfiddle.net/AGYGH/9/

【讨论】：