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>

我注意到输入也会发生这种情况。它们不会像普通块元素那样响应顶部/底部和左/右隐含的尺寸。

我的解决方法是将边框和填充放在容器上，并将 textarea 位置设置为相对，将宽度/高度设置为 100%。但这并不完美，因为 textarea 的滚动条位于填充内，从 UI 角度来看（对我来说）这是不可接受的。

有什么我想念的吗？如何使 FF/IE 中的 textareas 上/右/下/左工作？

4

1 回答 1

1

它需要在哪些版本的 IE 中工作？

如果您更改#tato的位置relative并将其宽度和高度设置为100%您可以添加

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

使其在 IE8+、Firefox 3.0+ 以及 Safari 和 Opera 中也能正常工作。

那时就不再需要 top/right/bottom/left 属性了。

于 2010-05-25T16:02:38.730 回答