2012-10-03 11 views
9

パディングをテキストエリアに設定すると、最初の外観では問題なく動作します。 しかし、テキストエリアの高さを超えてコンテンツを入力すると(スクロールバーの表示が始まると)、パディングボトムが存在しなくなります。 これを修正する方法はありますか?これはデフォルトの動作であるようです。 ここでは非常に基本的な例を見ることができます:http://jsfiddle.net/corinne/LKkky/ PS。使用されるブラウザはChromeです。 PS2。ちょうどFirefoxで試して、実際にはパディングはそのままです。テキストエリアのパディングボトムは考慮されていません

+3

はい、回避できません。 div内にtextareaを入れ、divをスタイルし、textareaとet voilaから枠線を削除します。 –

+1

パディングはまだありますが、入力するとスクロール可能な領域の下に落とされます。ページにスクロールバーがある場合は、スクロールするdivがある場合でも本文の場合でも同じです。 –

+1

Firefox 8.0を使用していますが、どこに問題があるのか​​わかりません。どのくらいのテキストを入力しても、常にパディングがあります。だから多分それはあなたが使用しているブラウザに固有です。 – Shadowxvii

答えて

3

Chrome、Safari、Internet Explorerは、FirefoxとOperaとは異なる方法でテキストエリアのパディングをレンダリングします。これらのうちのどれがテキストエリアを正しく表示しないのですか?実際にはどれもそれを間違ってレンダリングしていないので、すべてが仕様をどのように解釈しているかということになります。

この「問題」を解決するCSSプロパティはありません。この「問題」を回避する唯一の方法は、テキストエリアにコンテナエレメントを追加し、その代わりにパディングを与えることです。

1

実際はまだ存在しますが、テキストボックスの内容が入力されたときに余分な20ピクセルのパディングを表示するには、スクロールダウンする必要があります。オーバーフローが表示されることがあります:hidden

+0

はい、そうです。しかしオーバーフロー:hiddenはスクロールバーを隠すだけです。そして、実際には、問題は変わらない、私はまだパディングを参照するためにブラウズする必要があります。 – Corinne

+0

私はjsfiddleクロムでテストしました。コンテンツがパディングレベルまで満たされ、次のラインまで満たされると、フォーカスが下がり、パディングが下に残っていましたが、上から切り落とされました。私はユーザーmdkがあなたのために最高のソリューションを持っていると信じています。この質問をお寄せいただきありがとうございます。 –

+0

'overflow-x:hidden'は私のために働き、垂直スクロールバーはまだ利用可能です – andreymal

1

formタグにスタイルfont-size: 0;を割り当てることができます。これは、そのようなタグの内側に新しいラインがあり、回避する必要があるためです。

これを実行した後、内容が最も単純な場合はテキスト領域のコンポーネントに正しいfont-sizeを割り当てる必要があります。

関連する問題