表格单元格未在Google Chrome上正确调整大小

Question

我们有一张桌子:

<table style="width: 100%; border: 2px solid black;">
    <tr>
        <td style="width: 40%; height: 20px;">
            ABC
        </td>
        <td style="width: 20%; height: 20px;">
            <textarea style="width: 100%;"></textarea>
        </td>
        <td style="width: 40%; height: 20px;">
            DEF
        </td>
    </tr>
</table>

你可以在这里看到它(http://jsfiddle.net/PyPhk/).

在Firefox中调整页面大小时,单元格保持40:20:40的比例.在Chrome中调整页面大小时,比率更改和textarea的单元格不会调整大小.当"白色空间:nowrap;" 被删除,调整大小工作正常.

使用"white-space:nowrap"调整大小时为什么Chrome不能保持比例？

Answer 1

我不确定为什么会发生这种情况（我现在正在研究，如果我找到它为什么会这样，我会更新这个答案），但你可以通过将 a 来修复textarea它block。

textarea{
    display: block;
}

演示