0

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

1 に答える 1

0

あなたのフィドルで問題を再現できました。Chrome バージョン バージョン 29.0.1547.76 を使用しています。

私がしなければならなかったのは、textarea の CSS 宣言を追加することだけでした。

textarea {
    vertical-align:top;
}

これにより、任意のテキストエリアのサイズを変更でき、サイズ<td>の変更に対応することができます。

例：小さいものから大きいもの、小さいものへ。

修正したフィドルでテストしてください: http://jsfiddle.net/uJ7U6/1/

于 2013-10-04T14:34:53.903 に答える