2

テーブルセル内にテキストエリアを配置すると...

<table style="height:200px">
    <tr>
        <td>Some<br>nifty<br>text<br>filler</td>
        <td style="padding:0px">
            <div style="height:100% !important">
                <textarea style="resize:none; height:100% !important; width:100% !important" data-ng-model="modelLogin.inpMtext">
            </div>
        </td>
    </tr>
</table>

...そして、テキストエリアとそれを含む div の両方が 100% の重要な高さになるように細心の注意を払っています...実際、テキストエリアは Chrome ではすべてのセルの高さをカバーしていますが、Firefox ではカバーしていません。

Firefoxで状況を修正する理由および/または方法はありますか?

4

1 に答える 1

2

Mozilla はそれを完璧に正しく行います! 親の 100% のテキストエリアの高さを割り当てます。親 (div) は、親 (td) の高さの 100% です。Td の高さは定義されていないため、高さ全体に伸ばすことはできません。[td の高さ = テーブルの高さだと思うかもしれませんが、この仮定は正しくありません] それを修正するには、次のように 100% の高さを割り当てる必要があります。

<td style="height:100%">

ルールは簡単です: 幅/高さ/余白をパーセントで適用する場合は、ブラウザにそれを計算するためのベンチマークがあることを確認してください (最終的な高さまでのすべての親は、その高さを持つ必要があります)。

それが役に立たない場合は、display:block を textarea に追加します (本当に必要かどうかはよくわかりません) そして... 複数の !importants でこれらの厄介なインライン スタイルを削除できます :-)

于 2013-10-07T14:54:15.507 に答える