resize: none 未生效的主因是 overflow 缺失或被覆盖，因 css 规范要求 resize 仅在 overflow 为 auto、hidden 或 scroll 时才起作用，而 textarea 默认 overflow: visible 会导致该声明被忽略；需配合 overflow: auto 并确保样式作用于真实 textarea 元素，避免被 ui 库等高优先级规则覆盖。
resize: none 为什么写了还是能拖
不是属性写错了，而是它根本没生效。最常踩的坑是：overflow缺失或被覆盖——CSS 规范明确要求 resize 只在 overflow 为 auto、hidden 或 scroll 时才起作用，而 textarea 的默认值是 visible，此时整个 resize 声明会被浏览器忽略。
验证方法：打开开发者工具 →「Computed」面板 → 搜索 resize，确认最终计算值是不是 none；如果不是，说明样式被更高优先级规则吞掉了。
- 第三方 UI 库（如 Ant Design、Element Plus）通常把真实
textarea包在div里，类名类似.el-textarea__inner，直接写textarea { resize: none; }根本不匹配 - Bootstrap 4+ 默认写了
textarea { resize: vertical !important; }，你的普通规则权重不够 - 内联样式最稳：
<textarea style="resize: none; overflow: auto;"></textarea>，不用!important也能生效
vertical 不等于“安全”，反而更容易撑破布局
resize: vertical 只禁用水平拖拽，但用户仍可无限拉高——如果没配 max-height，它可能拉到遮挡按钮、挤掉其他表单项，甚至触发父容器溢出。更隐蔽的是 Safari 下，哪怕写了 width: 100%，resize: vertical 也可能因缺少 min-width 或 max-width 导致宽度意外收缩或撑开。
- 错误写法：
textarea { resize: vertical; height: 120px; }——height是初始值，不构成约束 - 正确配对：
min-height: 6em; max-height: 6em; box-sizing: border-box;，避免padding和border算进高度后超限 - 移动端建议用
em或rem替代px，提升尺寸响应稳定性
怎么精准控制特定 textarea，而不是全局一刀切
全局重置 textarea { resize: none; } 很危险，容易误伤日志面板、调试器等需要二维调整的场景。精准控制靠选择器，但要注意优先级和封装层级：
- 按 class：
.comment-field { resize: none; overflow: auto; }，HTML 中写<textarea class="comment-field"></textarea> - 按 name 属性：
textarea[name="description"] { resize: none; overflow: auto; } - 按 id：
#bio-input { resize: none; overflow: auto; } - 慎用内联样式：
<textarea style="resize: none; overflow: auto;"></textarea>—— 调试时无法用 DevTools 临时覆盖，后续 JS 动态改样式也难维护
移动端 Safari 的绕过行为无法用 CSS 拦截
iOS Safari 默认不显示右下角手柄，但部分版本（尤其是 iOS 16+）仍可通过长按 + 拖动触发系统级缩放，这种行为由 WebKit 内核直接接管，resize: none 完全无效。如果你的应用有强尺寸控制需求（如固定网格、表单校验），仅靠 CSS 不够。
- 必须配合
min-width/max-width和min-height/max-height锁死尺寸，防止视觉错位 - 动态插入的
textarea（比如弹窗里 JS 创建的），记得插入后立即加style.resize = 'none'，否则可能短暂暴露手柄 - IE 完全不支持
resize，但 IE 本来也不显示手柄，所以“天然禁用”；真正麻烦的是老安卓 WebView（如 Android 4.x 自带浏览器），建议真机测试
textarea 元素上、有没有被更高优先级规则覆盖、以及移动端是否存在隐藏路径可绕过限制。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
