5

私はここで何か間違ったことをしていると思います.textareaはすべての側で親divよりも10px小さいと思いますが、そうではありません.小さすぎます:

<html>
  <div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
    <textarea style="position: absolute; left: 10px; top: 10px; bottom: 10px; right: 10px; border: 1px solid #FF0000; resize:none;"></textarea>
  </div>
</html>

jsfiddle: http://jsfiddle.net/2a7LR/1/

なぜこれが起こるのですか？親 div から両側に 10 px 小さく収まるようにするにはどうすればよいですか?

chrome/safari でのみ正しく表示されますが、他のすべてのブラウザー (firefox、opera、IE8) では正しく表示されません。

4

3 に答える 3

10

http://jsfiddle.net/2a7LR/5/いくつかの CSS を調整しました。基本的に を使用し、 をコンテナのプロパティにwidth: 100%; height: 100%移動してからテキストエリアに追加して、境界線を考慮したサイズにしました。10pxpaddingbox-sizing

于 2012-05-25T08:59:46.670 に答える
2 
<html>
<div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
    <textarea style="position: relative; margin: 10px 10px 10px 10px; width:90%; height: 90%"></textarea>
</div>
</html>​

これはうまくいくはずです。テキスト領域は、絶対 div 内で相対的にすることができます。上と左ではなく、余白で配置するだけです。

乾杯、フェデ

編集：また、テキスト領域に幅と高さを設定していないことに気付いたので、そのサイズを知ることはサポートされていません-デフォルトを置くだけです。

于 2012-05-25T09:00:57.123 に答える
-2

http://jsfiddle.net/EzJ8G/1/ textarea のスタイルを置き換え、padding:10px を追加します。

于 2012-05-25T08:49:52.603 に答える