Question

我有<td>，其中包含<div>，其中div绝对定位。然后通过将<td> css属性设置为0来将height, line-height, border, and padding-top/padding-bottom设置为0。

结果与许多其他元素和javascript结合使用时，是一个标题行，它可以漂浮在表格上方，同时保持与表格列正确对齐。

这适用于我能够测试的每个浏览器和操作系统（Safari，Chrome，Windows和Mac上的IE），除了Firefox。在firefox中，包含0个高度<tr>的{{1}}显示为4像素高 - 但仅当<td>内部具有<div>属性时position或absolute。例如，如果我使用fixed position，则行正确折叠为0px高。当然，我需要在div上使用relative的位置来使其他一切工作。

如何让firefox正确折叠absolute / <tr>？

HTML：

<td>

CSS：

<table id="zeroHeight">
    <tr>
        <td>
            Some Content that should disappear
            <div>Content that should have no background</div>
        </td>
    </tr>
</table>

注意：这里的问题不在于绝对DIV的定位。这很好用，因此我没有打扰包括示例中的任何定位。问题是#zeroHeight tr{ background-color:lightblue; } #zeroHeight tr td{ height:0px; padding-top:0px; padding-bottom:0px; line-height:0px; border:0px; color:transparent; white-space: nowrap; } #zeroHeight td div{ position:absolute; color:black; }无法正确折叠到零高度，如应用于<TD>/<TR>

的可见背景颜色所示

编辑：此处的问题是<tr> / td的非零高度，而不是可见的背景颜色。行上的背景颜色只是使问题可见的简单方法。

Answer 1

我不会那样设置tr和td。为什么不将不可见内容包装在额外的div中并隐藏它？

<强> HTML：

<table id="zeroHeight">
    <tr>
        <td>
            <div class="invisible">Some Content that should disappear</div>
            <div class="visible">Content that should have no background</div>
        </td>
    </tr>
</table>

<强> CSS：

#zeroHeight tr td div.invisible{
    background-color:lightblue;
}

#zeroHeight tr td div.invisible {
    height:0px;
    padding-top:0px;
    padding-bottom:0px;
    line-height:0px;
    border:0px;
    color:transparent;
    white-space: nowrap;
}

#zeroHeight td div.visible{
    position:absolute;
    color:black;
}

见这里：https://jsfiddle.net/2j2s9jys/1/

绝对位置div阻止td在firefox

1 个答案: