5

我们有一张桌子：

<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;” 被删除，调整大小工作正常。

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

4

4 回答 4

3

看起来这是特定于 webkit 的行为。似乎 webkit 没有完全使用 textarea 上的百分比指定的相对宽度，并且在自动对齐表格时，它使用从 cols 属性计算的像素值传播到它的父级。默认列数为 20。

您可以使用覆盖从 cols 计算的值的 textarea 的绝对宽度来解决问题，或者您可以指定一个虚拟 cols 值 1。但是，最好的解决方案是table-layout: fixed在您的表格上使用，这似乎会强制表格单元格使用在表格单元格中指定值，而不是尝试根据子元素进行计算。

在此处查看解决方案：http: //jsfiddle.net/TbQYT/3/

于 2013-06-26T13:31:40.313 回答
2

在我看来，Chrome 默认有最小的 textareas 大小。即使使用内置的角调整大小，它也不会低于一定的高度和宽度。

于 2013-06-26T13:03:50.617 回答
2

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

JSFiddle：http: //jsfiddle.net/PyPhk/2/

HTML：

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

CSS：

table tr td {
    white-space: nowrap;
}

.textCell {
    white-space: normal;
}

更新：

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

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) 不将此样式定义为默认样式。

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

textarea{
     display: block;
}

您可以坚持使用我的工作来覆盖表格单元格级别的样式，或者您可以专门为该 textarea 定义一个display: block;应用在其上的类，以便您考虑的“缺点”不适用于所有 textarea。

于 2013-06-26T12:53:26.077 回答
2

我不确定它为什么会发生（我现在正在研究，如果我发现它为什么会这样，我会更新这个答案），但你可以通过制作textareaa来修复它block。

textarea{
    display: block;
}

演示

于 2013-06-26T12:52:26.760 回答