field-sizing不是有效CSS属性，所有主流浏览器截至2026年5月均不支持，会被静默忽略；textarea自适应高度必须用JS结合scrollHeight实现，并严格设置min-height、max-height、resize: none和box-sizing: border-box四项CSS规则。
field-sizing 不是有效 CSS 属性，所有主流浏览器（Chrome、Firefox、Safari、Edge）截至 2026 年 5 月均不支持，写了也完全没效果——它不会报错，但会被静默忽略。
为什么 field-sizing: content 在你项目里没反应
你看到的“生效”案例，基本来自三类混淆：
- 把早已废弃的私有前缀（如旧版 Safari 的
-webkit-field-sizing）当成通用属性 - 把 UI 框架组件的
autoSizeprops 或 JS 库行为误标为原生 CSS - 引用了未进入规范草案的编辑器草稿（CSS Basic UI Module Level 4），该草案从未被任何浏览器引擎实现
你可以当场验证：getComputedStyle(document.querySelector('textarea')).fieldSizing 返回空字符串；CSS.supports('field-sizing', 'content') 在 Firefox/Safari 中返回 false；CanIUse 和 MDN 上查不到该属性。
textarea 自适应高度真正依赖的 CSS 组合
必须显式写死以下四项，缺一不可：
-
min-height: 3.5rem或min-height: 3lh—— 空值时提供可靠基础高度，避免塌缩成一条线 -
max-height: 200px—— 防止粘贴长文本撑爆页面，这是防崩底线 -
resize: none—— 否则用户拖拽会破坏 JS 控制逻辑 -
box-sizing: border-box—— Bootstrap 5 的.form-control已含此项，但自定义textarea必须手动加
别漏掉父容器：若父级（如 .col 或 .card-body）设了 overflow: hidden，得改成 overflow: visible，否则内容被裁、scrollHeight 计算失准。
JS 动态调整高度的核心逻辑和坑点
监听 input 事件，执行两步重设：
- 先设
$ta.style.height = 'auto'—— 清除浏览器缓存高度，否则删内容时不收缩 - 再赋
$ta.style.height = $ta.scrollHeight + 'px'——scrollHeight是唯一能准确反映渲染所需像素高度的只读属性
移动端尤其要注意：
- iOS Safari 中，中文输入法候选阶段或键盘弹起瞬间，
scrollHeight会滞后一帧 → 必须用requestAnimationFrame包裹赋值 - 字体加载完成前触发计算，
scrollHeight偏小 → 需等document.fonts.load()完成后再初始化 - React/Vue 中 ref 更新滞后 → 要在
nextTick或flushSync后再读高度
真正上线的方案，从来不是“一行 CSS 解决”，而是这十几行老实 JS 配合四条关键 CSS 规则。最容易被跳过的，是 iOS 键盘弹出时 visualViewport 尺寸突变导致的高度失准——它不报错，但用户会明显感觉到框“卡住”或“跳动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
