textarea resize: none 无效是因为 overflow 默认为 visible，而规范要求 overflow 必须是 auto、hidden 或 scroll 才生效；需同时设置 overflow 和确保样式命中真实元素。
直接给 textarea 加 resize: none 不生效，八成是因为 overflow 没配对——这是最常踩的坑，不是写错了，而是浏览器根本没认这个声明。
textarea resize: none 为什么无效？
规范明确要求：resize 只在 overflow 为 auto、hidden 或 scroll 时才起作用。而 textarea 默认是 overflow: visible，此时整个 resize 声明会被浏览器静默忽略。
- 检查「Computed」面板里
resize的最终值是不是none，不是就说明被覆盖或未触发 - 第三方 UI 库（如 Ant Design）常把真实
textarea包在div里，类名类似.el-textarea__inner，直接写textarea { resize: none; }根本不匹配 - Bootstrap 4+ 默认加了
textarea { resize: vertical !important; }，普通规则权重不够
怎么让 resize: none 真正生效？
必须同时满足两个条件：显式设置 overflow + 确保样式命中真实元素。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 最稳写法：
，不用!important也能压过大多数库的默认规则 - 如果要用 class 控制，优先用属性选择器：
textarea[name="comment"] { resize: none; overflow: auto; } - 避免全局重置：
textarea { resize: none; }容易误伤调试面板、日志窗口等需要二维调整的场景
只禁拖拽还不够：还得防 vertical 拉高失控
resize: vertical 表面禁了横向拉伸，实则纵向上完全放任——用户一拉到底，可能撑破按钮、挤掉其他表单项，甚至触发父容器溢出。
- 别只设
height: 120px，它只是初始值，不构成约束；必须配对min-height和max-height - 推荐写法：
min-height: 6em; max-height: 6em; box-sizing: border-box;，避免padding和border算进高度后超限 - 移动端建议用
em或rem替代px，缩放时更稳定
表格里嵌 textarea 的特殊处理
表格单元格本身没有原生拖拽手柄， 真正锁住大小，靠的不是单个属性，而是 resize: none 对 或
完全无效——但里面塞的 textarea 仍会响应拖拽，且容易被 table-layout: auto 撑变形。
table-layout: fixed，再给 td 设固定宽高，否则 textarea 拉高会连带撑开整行td 内需加 vertical-align: top，避免 textarea 默认基线对齐导致上下留白错位textarea 同时要自适应内容高度，必须在 JS 动态设高前先清空 style.height，否则旧值干扰 scrollHeight 计算resize + overflow + min/max-height + table-layout: fixed 四者咬合。漏掉任意一环，都可能在某个浏览器、某次缩放、某次粘贴后突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
