这是一个示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Textarea</title>
<style type="text/css">
* {width:100%; height:100%; margin:0; border:0; padding:0; background:#D3D3D3;}
textarea {overflow:auto; box-sizing:border-box; -moz-box-sizing:border-box; padding:6px;}
</style>
</head>
<body>
<form action="#">
<textarea rows="1" cols="1">This is some text.</textarea>
</form>
</body>
</html>
我使用 box-sizing 属性将 textarea 宽度设置为 100% 加上一些填充，它适用于所有主要浏览器。但是，在 Firefox 中，如果您向 textarea 添加更多内容，您会在滚动条周围看到不需要的填充。
Firefox 不仅将填充应用于内容，还应用于滚动条。
更改您的textarea样式定义，使其如下所示：
textarea
{
overflow:auto;
box-sizing:border-box;
-moz-box-sizing:border-box;
line-height:26px;
padding: 0;
padding-left: 6px;
}
这纠正了填充问题，但是一旦有两行或更多行文本，看起来就会有些尴尬。