在Chrome中调整TextArea大小的问题

时间:2013-10-04 13:05:38

标签: html css google-chrome

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

1 个答案:

答案 0 :(得分:0)

我能够在你的小提琴中复制这个问题。我使用的是Chrome版本29.0.1547.76。

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

textarea {
    vertical-align:top;
}

这让我可以调整任何textareas的大小,让<td>响应大小的变化。

e.g。从小到大到小。

在你修改过的小提琴上测试一下: http://jsfiddle.net/uJ7U6/1/