html - 在 TD 中使用高度 100% 会削减 FF 中的内容

Question

我使用以下标记，但在 FF (v30) 中，td 不会被最后一个带有红色背景色的 div 拉伸(stretch)。这是对的吗？它认为 TD 应该根据内容进行扩展(td 的正常行为)。我该如何修复它(需要 2 个高度为 100% 的 div，并且不能删除)？

<table style="width: 200px;">
            <tr>
                <td style="height: 100px;">
                    <div style="height: 100%;">
                        <div style="height: 100%; border: 2px solid green;">
                            <div style="height: 200px; background-color: red;"></div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>

JSFiddle

编辑#1:

<td style="height: 100px;">

高度应以像素为单位指定，以防止内容丢失时 td 折叠，因此我不能使用百分比值。

Answer 1

删除 100px 或将 px 替换为 %

replace <td style="height: 100px;"> with <td style="height: 100%;">