问题：我创建了一个简单的测试页面（如下）来演示问题所在。当您在边框 = 2px 的文本区域字段上设置 CSS 时，文本区域将自行调整大小因此，文本区域下的所有字段/内容都将向下移动。
这仅适用于文本区域和选择字段，而输入字段不以这种方式起作用。
我已经在IE，Opera和FF中对此进行了测试，它们都没有产生相同的行为，它们都像它们应该的那样工作，而 Chrome 会移动它们下方的所有元素。
有人知道可以使用CSS防止这种情况的修复程序吗？
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style language="text/css">
textarea:focus {
border: 2px solid #000000;
}
textarea {
width: 300px;
height: 100px;
resize: none;
outline: none;
}
</style>
</head>
<body>
<form>
<textarea name="test" cols="0" rows="0"></textarea>
<br />
This text and button will move a few pixels down when you click in textarea field.
<br/>
<input type="submit" name="submit" value="submit"/>
</form>
</body>
</html>
发生这种情况是因为您在hover上给出了边界。边框应该已经作为透明颜色存在，并且在hover或focus只是给出边框颜色。
textarea:focus {
border-color:#000000;
}
textarea {
width: 300px;
height: 100px;
resize: none;
outline: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 2px solid transparent;
}
使用 css 框大小：border-box; 文本区域 CSS 中的属性。 请参阅示例：
textarea {
box-sizing: border-box;
}
我检查了你的代码。实际上，Chrome添加了不包括宽度和高度的边框。
您可以使用"框大小"属性来检查这一点。
框大小调整属性用于告诉浏览器大小调整属性（宽度和高度）应包括的内容。祝您编码愉快！