textarea在table中resize: none仍可拖拽，是因为其默认overflow: visible导致该属性被浏览器忽略；必须同时设置resize: none和overflow: auto（或hidden/scroll）才生效，且需确保样式作用于真实textarea元素。
textarea 在 table 里为什么 resize: none 还是能拖
因为样式根本没生效。表格内的 textarea 默认 overflow: visible，而 CSS 规范强制要求：只有当 overflow 是 auto、hidden 或 scroll 时，resize 属性才起作用——哪怕你写了 resize: none，只要 overflow 是 visible，整个声明就被浏览器忽略。
常见错误写法：textarea { resize: none; }（缺 overflow）或 td textarea { resize: none; }（被框架或重置样式覆盖）。
- 验证是否生效：打开开发者工具 → 「Computed」面板 → 搜索
resize，看最终值是不是none - 检查真实元素：Ant Design、Element Plus 等封装的
<el-input type="textarea"></el-input>渲染出来的是<textarea class="el-textarea__inner"></textarea>，直接写textarea { ... }不匹配 - Bootstrap 4+ 默认带
textarea { resize: vertical !important; }，你的规则权重不够
怎么让表格里的 textarea 真正禁用拖拽
必须同时满足两个条件：作用于真实 textarea 元素 + resize: none 和 overflow: auto 成对出现。推荐用类名精准控制，避免污染全局。
- HTML 中加 class：
<textarea class="fixed-input"></textarea> - CSS 写法：
.fixed-input { resize: none; overflow: auto; } - 如果表格列宽敏感，再加
width: 100%; box-sizing: border-box;，防止 padding/border 撑破单元格 - 内联样式最稳（调试期可用）：
<textarea style="resize: none; overflow: auto; width: 100%; box-sizing: border-box;"></textarea>
为什么 vertical 不适合表格场景
resize: vertical 看似“只允许上下拉”，但在表格里反而更危险：它保留右下角手柄，用户仍可无限拉高，极易撑破 td 高度、挤掉相邻行内容，甚至触发父 table 溢出滚动。
立即学习“前端免费学习笔记（深入）”；
- 仅设
height: 120px无效——height只是初始值，不构成约束 - 必须配
max-height（建议和min-height同值，如min-height: 4em; max-height: 4em;） - Safari 下
resize: vertical对宽度响应不稳定，width: 100%可能失效，需额外加min-width: 0; max-width: 100%; -
resize: none才真正移除手柄和行为，比vertical更干净、更可控
移动端和兼容性要注意什么
iOS Safari 默认禁用 textarea 拖拽，所以 resize: none 在移动侧基本是冗余但安全的；真正要防的是 Android 旧 WebView（如 4.x 系统自带浏览器），它可能忽略该声明。
- 不要依赖
::resizer：写textarea::resizer { display: none; }完全无效，这个伪元素只读，不能隐藏或删除手柄 - IE 全系列不支持
resize，但也不需要处理——它本来就没有手柄 - 若真要兜底旧环境，优先检测属性支持：
if ('resize' in document.documentElement.style) { /* 应用 CSS */ }，而非上 JS 监听dragstart - 真正容易被忽略的不是“怎么关拖拽”，而是“关了之后内容溢出怎么处理”：确保
overflow: auto存在，且max-height设置合理，否则用户看不到滚动条，输多就卡死
