Html Google Chrome上的表格单元格大小调整不正确

我们有一张桌子：

<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>

基础知识
DEF

你可以看到

在Firefox中调整页面大小时，单元格保持40:20:40的比例。在Chrome中调整页面大小时，比率会发生变化，并且带有textarea的单元格不会调整大小。当删除“空白：nowrap；”时，调整大小工作正常

---

为什么Chrome在使用“空白：nowrap”调整大小时不保持比率？

我不确定为什么会发生这种情况（我正在研究，如果我发现为什么会这样，我会更新这个答案），但是你可以通过将

文本区域设置为
块来修复它

textarea{
    display: block;
}

我不确定为什么它在Chrome中不起作用，但您可以简单地覆盖textarea单元格上的样式，如下所示：

JSFiddle：

HTML:

更新：

在检查了原始的fiddle之后，您可以看到Chrome在其自己的样式表中提供了一些默认页面样式：
user-agent样式表

textarea包含的样式包括：

textarea {
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}

阻止所需行为的样式是
display:inline block
。不同之处在于其他浏览器（Firefox）没有将此样式定义为默认样式

因此，有效的解决方法是按照@captive的建议覆盖此选项，尽管您认为这有缺点

textarea{
     display: block;
}

您可以继续我的工作，覆盖表格单元格级别的样式，也可以使用
display:block应用于它，因此您所考虑的“缺点”并不适用于所有文本区域。
在我看来，Chrome默认情况下具有文本区域的最小大小。即使使用内置的角调整，它也不会低于某个高度和宽度。
看起来这是webkit特有的行为。webkit似乎没有完全使用textarea上用百分比指定的相对宽度，而是在自动对齐表格时使用从cols属性计算的像素值传播到其父级。默认cols为20

您可以使用textarea的绝对宽度替代cols的计算值，也可以将虚拟cols值指定为1。但是，最好的解决方案是在您的表上使用
表布局：fixed
，它似乎强制表单元格使用表单元格中的指定值，而不是尝试基于子元素进行计算

查看此处的解决方案：
虽然它是一个有效的解决方案，但对我来说不是一个好的解决方案<代码>显示：块
有太多缺点。但谢谢。这是一个有效的解决方案，但问题是为什么？
textarea {
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}

textarea{
     display: block;
}