必须显式设 textarea { box-sizing: border-box }，因其默认 content-box 会导致宽度计算为 width+padding+border，与 border-box 的 input/select 视觉错位；还需同步声明 font-family、font-size、line-height 并设 resize: none。
直接给 textarea 显式设 box-sizing: border-box 是必须的，否则它永远按 content-box 算尺寸，和你项目里其他表单控件对不齐。
为什么 textarea 默认 box-sizing 会破坏表单对齐
几乎所有浏览器中 textarea 的默认 box-sizing 都是 content-box，而现代项目通常已把 input[type="text"]、select 等设为 border-box。结果就是：
- 写了
width: 200px，实际占位 = 200px + 左右padding+ 左右border - 和旁边
input并排时明显更宽，视觉错位 - 在 Flex/Grid 表单布局中，
flex: 1分配失衡，甚至换行
textarea 必须单独重置，不能只靠 * 通配符
即使你写了 * { box-sizing: border-box; }，textarea 在某些老版 Safari 或 WebKit 内核 WebView 中仍可能回退到 content-box。更稳妥的做法是显式声明：
input,
textarea,
select,
button {
box-sizing: border-box;
}
这条规则要放在所有自定义样式之前，避免被 Ant Design、Element Plus 等 UI 库的更高权重选择器覆盖。
textarea 字体和 resize 必须同步处理
box-sizing 只解决尺寸计算逻辑，但 textarea 还有两个隐藏陷阱：
- 字体继承不可靠：必须同时声明
font-family、font-size、line-height，三者缺一不可；推荐用像素值，比如font-size: 14px，避免em或rem在不同浏览器中解析偏差 -
resize属性干扰最小尺寸：默认resize: both会让浏览器优先保障拖拽区域可用空间，压缩内容区；应统一关掉：resize: none
容易被忽略的兼容细节
真正生效的关键不在“写了没”，而在“谁先算、谁后算”：
- 如果用了 CSS-in-JS（如 Emotion），确保该规则没有被 scoped style 隔离，或加
:global声明 - 某些 UI 库（如 Vant）对
textarea有内联!important样式，得用更具体的选择器覆盖，例如.van-field__control textarea -
textarea在 iOS Safari 中缩放后可能丢掉line-height，加min-height作兜底比依赖height更稳
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
