field-sizing 不是有效的 CSS 属性，所有主流浏览器均不支持，会被静默忽略；textarea 高度自适应必须用 JS + scrollHeight 实现，且需注意 min/max-height、box-sizing、overflow 等细节及 iOS 输入法兼容性问题。
field-sizing 不是有效的 CSS 属性，所有主流浏览器（Chrome、Firefox、Safari，截至 2026 年 5 月）均不支持，写了也完全没效果——它不会报错，但会被静默忽略。
你搜到的“field-sizing: content”示例，基本来自三类混淆：
- 把早已废弃的私有前缀（如旧版 Safari 的
-webkit-field-sizing）当成通用属性 - 把 UI 框架组件的
autoSizeprops 或 JS 库行为误标为原生 CSS - 引用了未进入规范草案的编辑器草稿（CSS Basic UI Module Level 4），该草案从未被任何浏览器引擎实现
你可以当场验证：getComputedStyle(document.querySelector('input')).fieldSizing 返回空字符串；CanIUse 和 MDN 上查不到该属性；Chrome/Firefox/Safari 最新稳定版均无视该声明。
为什么 Chrome 123+ 看起来“生效”了？
Chrome 123+ 确实实验性支持了 field-sizing，但仅限于部分控件（如 ），且 content 值对 无效。更关键的是：Firefox 和 Safari 完全不识别，也不 fallback，写上去就是白费——iOS 用户看到的可能是高度为 0 的塌陷框。
textarea 高度自适应必须用 JS + scrollHeight
这是目前唯一跨浏览器、可上线的方案，核心逻辑只有两行，但必须配合以下要点：
-
min-height和max-height必须用 CSS 显式设置，否则空值时缩成一条线、长内容时撑爆页面 - JS 中先设
el.style.height = 'auto'，再读el.scrollHeight，否则计算不准 - 必须加
box-sizing: border-box，否则scrollHeight包含 padding/border，导致重复叠加 - 父容器不能设
overflow: hidden，否则会截断内容并使scrollHeight返回错误值 - iOS Safari 中需在
input事件里用requestAnimationFrame包裹赋值，否则高度跳动
input 和 select 根本不支持“高度自适应”
是单行控件，浏览器强制限制为一行，无法靠任何 CSS 属性撑高； 渲染由操作系统级 UI 控制，宽度适配兼容性极差（width: fit-content 在 Safari 上表现不稳定，white-space: nowrap 又易溢出）。所谓“field-sizing: content 让 input 自适应宽度”，实际是误把 resize: none + width: fit-content 或 JS 动态测量当成了原生能力。
移动端最常被跳过的陷阱是键盘与输入法
iOS 键盘弹出时 visualViewport 尺寸突变，中文输入法候选字未上屏时 input 事件已触发但 scrollHeight 还没更新——这两点会导致高度计算滞后一帧，出现“文字已换行、框还没长高”的抖动。真实项目里，得监听 compositionstart/compositionend、resize 和 visualviewport.resize 三类事件做兜底重算，而不是只写一个 input 监听器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
