0

Chrome、Firefox、IE で次のコードを試してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Textarea problem</title>
<style type="text/css">
html, body {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 0; padding: 0; margin: 0;
}

#container {
  position: absolute;
  top: 4px;bottom: 4px;
  right: 4px;left: 4px;
  background-color: grey;
}

#ta {
  position: absolute;
  bottom: 0; right: 0;
  top: 0; left: 0;
  /*width: 100%; height: 100%;*/
  border: black 4px solid; padding: 0; margin: 0;
  background-color: orange;
  padding: 8px;
}
</style></head>
<body>

<div id="container">
    <textarea id="ta" >This textarea should fill the window. But FF and IE leave the dimensions at the defaults! This happens when the corner offsets are specified; not when width and height are specified. But 100% width and height do not play with the box model when using padding and borders. </textarea>
</div>

</body>
</html>

これは入力でも発生することに気付きました。これらは、通常のブロック要素のように、上/下および左/右によって示される寸法には反応しません。

私の回避策は、コンテナにボーダーとパディングを配置し、テキストエリアの位置を相対的に、幅/高さを 100% に設定することです。しかし、テキストエリアのスクロールバーがパディング内にあるため、完全ではありません。これは、UI の観点から (私にとっては) 受け入れられません。

足りないものはありますか？FF/IE のテキストエリアで上/右/下/左を機能させるにはどうすればよいですか?

4

1 に答える 1

1

どのバージョンの IE で動作する必要がありますか?

の位置を に変更し、その幅と高さを に設定#taすると、追加できますrelative100%

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

IE8 以降、Firefox 3.0 以降、Safari および Opera でも動作するようにします。

その場合、上/右/下/左のプロパティはもう必要ありません。

于 2010-05-25T16:02:38.730 に答える