html - 绝对位置 div 防止 td 在 firefox 中达到 0 高度

Question

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

结果，当与一些与该问题无关的其他元素和 javascript 结合时，标题行可以很好地 float 在表格上方，同时与表格列保持正确对齐。

这在我测试过的所有浏览器和操作系统(Safari、Chrome、Windows 和 Mac 上的 IE)中都能正常工作，Firefox 除外。在 firefox 中 <tr>包含 0 高度 <td>有问题的显示为 4 像素高 - 但前提是 <div>里面有一个position absolute 的属性或 fixed .如果我使用 position的 relative ，例如，该行正确折叠为 0 像素高。当然，我需要一个位置absolute在 div 上使其他一切工作。

我怎样才能让 firefox 也正确地折叠 <tr>/<td> ？

html:

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

CSS:

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

注意:这里的问题与绝对 DIV 的定位无关。这工作正常，因此我没有费心在示例中包含任何定位的原因。问题是 <TD>/<TR>没有正确折叠到零高度，如应用于 <tr> 的可见背景色所示

编辑:这里的问题是 td 的非零高度/tr ，而不是可见的背景颜色。行上的背景颜色只是使问题可见的一种简单方法。

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/