在TD内部使用高度100％切割FF中的内容

Im using following markup, but in FF (v30) td are not stretched by the last div with red backcolor. Is it correct? It thought TD should be stretched by content (its normal behavior for td). How I can fix it (2 divs with 100% height are necessary and can't be deleted)?

我使用以下标记,但在FF(v30)td没有被红色背景的最后一个div拉伸。这是对的吗?它认为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

Edit #1:

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

Height should be specified in pixels to prevent td collapsing if content is missing, so I cant use a percent values.

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

1 个解决方案

#1

remove the 100px or replace px with %

删除100px或用%替换px

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