html - 在 Chrome 中调整 TextArea 大小的问题

Question

我在 Chrome 浏览器中调整文本区域大小时遇到​​问题。当我将文本区域的大小重新调整为更高，然后重新调整回其正常大小时，div 不会重新调整回其正常大小。这个问题是因为我使用的是“style="display: table"有没有人知道解决这个问题的方法？你应该能够用下面的代码在 http://jsfiddle.net/uJ7U6/ 复制我的问题

<div style="display: table;">
    <div style="display: table-row">
        <div style="display: table-cell;">
            <span style="font-weight: bold">TextArea 1</span>
        </div>
        <div style="display: table-cell;">
            <span class="dialogControlLabel">TextArea 2</span>
        </div>
        <div style="display: table-cell;">
            <span style="font-weight: bold">TextArea 3</span>
        </div>
    </div>
    <div style="display: table-row">
        <div style="display: table-cell;">
            <textarea id="txtTextArea1" rows="3" cols="30"></textarea>
        </div>
        <div style="display: table-cell;">
            <textarea id="txtTextArea2" rows="3" cols="30"></textarea>
        </div>
        <div style="display: table-cell;">
            <textarea id="txtTextArea3" rows="3" cols="30"></textarea>
        </div>
    </div>
</div>
<div>
    <div style="display: table-row">
        <div style="display: table-cell;">
            <span class="dialogControlLabel">TextArea 4</span>
        </div>
        <div style="display: table-cell;">
            <span class="dialogControlLabel">TextArea 5</span>
        </div>
        <div style="display: table-cell;">
            <span class="dialogControlLabel">TextArea 6</span>
        </div>
    </div>
    <div style="display: table-row">
        <div style="display: table-cell;">
            <textarea id="txtTextArea4" rows="3" cols="30"></textarea>
        </div>
        <div style="display: table-cell;">
            <textarea id="txtTextArea5" rows="3" cols="30"></textarea>
        </div>
        <div style="display: table-cell;">
            <textarea id="txtTextArea6" rows="3" cols="30"></textarea>
        </div>
    </div>
</div>

Answer 1

我能够在您的 fiddle 中重现该问题。我使用的是 Chrome 版本 29.0.1547.76。

我所要做的就是为 textarea 添加 CSS 声明。

textarea {
    vertical-align:top;
}

这让我可以调整任何文本区域的大小，并获得 <td>对大小的变化使用react。

例如从小到大再到小。

在修改后的 fiddle 上测试它: http://jsfiddle.net/uJ7U6/1/