Firefox / IE 文本区域大小调整怪癖 - 解决方法？
在 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 中的文本区域的顶部/右侧/底部/左侧工作？
Try out this code in Chrome, Firefox and 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>
I notice this happens for inputs as well. They do not respond like ordinary block elements to dimensions implied by top/bottom and left/right.
My workaround is to put the border and padding on the container and set the textarea position to relative and width/height to 100%. But it isn't perfect, because the textarea's scrollbars are then within the padding, which is unacceptable (to me) from a UI perspective.
Is there something I am missing? How can I make top/right/bottom/left work for textareas in FF/IE?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
它需要在哪些版本的 IE 中运行？
如果将
#ta的位置更改为relative并将其宽度和高度设置为100%，则可以添加使其在 IE8+ 中工作， Firefox 3.0+，还有 Safari 和 Opera。
那么 top/right/bottom/left 属性就不再需要了。
In which versions of IE does it need to work?
If you change the positioning of
#tatorelativeand set its width and height to100%you can addto make it work in IE8+, Firefox 3.0+, and Safari and Opera too.
The top/right/bottom/left properties aren't really needed anymore then.