Question

在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位置设置为relative，width / height设置为100％。但它并不完美，因为textarea的滚动条然后在填充内，从UI的角度来看这对我来说是不可接受的。

我有什么遗失的吗？如何在FF / IE中为textareas进行顶部/右侧/底部/左侧工作？

Answer 1

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

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

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

使其可以在IE8 +，Firefox 3.0 +以及Safari和Opera中使用。

不再需要顶部/右侧/底部/左侧属性。

Firefox / IE textarea大小调整 - 解决方法？

1 个答案: