HTML表格中textarea不继承td的font-size，因其是替换元素，默认使用浏览器UA样式（约13–14px）；需显式设td textarea{font-size:100%}或用ResizeObserver配合JS同步尺寸。
HTML表格里没有“文本域文字字号随单元格变化”的原生机制——textarea 是表单控件，不是普通文本，它不会继承 td 的 font-size，更不会自动响应单元格尺寸缩放。必须手动绑定样式或用 JS 同步。
textarea 不继承 td 的 font-size 是默认行为
即使你给 td 设置了 font-size: 16px，里面的 textarea 仍会走浏览器 UA 样式（通常为 13–14px），因为 textarea 是替换元素，其字体默认不参与 CSS 继承链。
- 验证方法：在 DevTools 的 Computed 面板里查
textarea的font-size，大概率显示 “13.333px” 或类似值，而非你设的td值 - 别指望
td textarea { font-size: inherit; }就能解决——部分旧版 Chrome/Safari 对inherit在textarea上支持不稳定 - 最稳妥写法是显式声明：
td textarea { font-size: 100%; }或td textarea { font-size: 1rem; }（前提是父级有可继承的基准）
让字号“随单元格变化”只能靠 JS 主动同步
所谓“随单元格变化”，实际指两种场景：单元格被 JS 动态缩放（如响应式重排）、或内容溢出触发字体缩小。CSS 无法监听 td 尺寸变化，必须用 ResizeObserver。
- 给每个含
textarea的td创建观察器：new ResizeObserver(() => { el.querySelector('textarea').style.fontSize = getComputedStyle(el).fontSize; }) - 注意：不能直接赋
getComputedStyle(td).fontSize给textarea，要先转成数值再补单位，否则可能传入calc(1rem + 2px)这类无效值 - 若单元格本身用了
em或vw字号，textarea同步后可能因嵌套计算失真，建议统一用rem或px
移动端 textarea 字号被 Safari/Android 强制干预
iOS Safari 会对 textarea 自动放大（尤其在 width 时），Android 某些 WebView 则会把小于 16px 的 font-size 拉高到 16px，导致你设的字号失效。
- 必须加：
textarea { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } - 同时确保
meta viewport存在且完整： - 若仍被拉高，可加临时兜底：
textarea { font-size: 16px !important; }（仅限移动端专用 class 下）
真正难的不是写几行样式，而是意识到 textarea 和普通文本在渲染层根本不在一个体系里——它有自己的编辑框、光标、缩放策略。想让它“听话”，就得放弃“自动继承”的幻想，老实用 ResizeObserver 或固定字号+弹性容器来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
