<p>resize: none 并非总生效，需确保选择器命中目标元素、overflow 显式设为 auto/scroll/hidden、CSS 优先级足够；移动端 iOS 长按仍可能缩放，Android 4.x WebView 可能忽略，IE10- 不支持。</p>
resize: none 是禁用 textarea 拖动的唯一可靠方式，但光写这一行几乎总会失效——问题不在属性本身，而在它是否真正作用到了目标元素上。
为什么写了 resize: none 还能拖？
最常见原因不是语法错，而是样式没生效：
- 第三方 UI 库（如 Ant Design、Element Plus）常把
textarea包在<div>里，你写的textarea { resize: none; }根本没匹配到真实渲染的元素 - 框架 CSS 权重更高，比如 Bootstrap 默认写了
textarea { resize: vertical !important; }，你的规则被覆盖 - 没显式设置
overflow：CSS 规范要求resize只在overflow为auto、scroll或hidden时才起作用；textarea默认是overflow: auto，但若全局重置成visible，resize: none就会被忽略 - 用开发者工具检查「Computed」面板，确认最终计算出的
resize值确实是none
怎么写才真正生效？
稳妥写法必须同时满足三个条件：选择器命中、overflow 显式、优先级足够：
- 推荐用类选择器 +
overflow: auto：.fixed-textarea { resize: none; overflow: auto; width: 100%; } - 临时验证或嵌入第三方环境时，直接用内联样式：
<textarea style="resize: none; overflow: auto;"></textarea> - 如果被
!important覆盖，加!important是最快验证手段，但别长期依赖 - 避免只写
resize: vertical—— 它允许用户拉高，仍会撑破容器、遮挡其他元素
移动端和老浏览器要注意什么？
现代浏览器（Chrome 1+、Firefox 4+、Edge 12+、Safari 5.1+）全支持 resize: none，但两个真实坑点不能跳过：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 不显示右下角手柄，但部分版本（尤其 iOS 16+）可通过长按 + 拖动触发系统级缩放，CSS 无法拦截，只能靠 UX 提示规避
- Android 4.x 系统自带 WebView 可能忽略该声明，务必真机测试，别只信模拟器
- IE 10 及更早完全不支持，不过 2026 年基本可忽略；若真要兜底，JS 拦截成本远高于收益，不建议写
禁用拖拽后，内容溢出怎么办？
resize: none 只干一件事：让右下角小方块消失。它不管高度适配、滚动条出现时机、移动端 touch 区域响应——这些都得你补：
- 必须搭配
max-height和overflow-y: auto，否则内容一多就撑开布局 - 别依赖
rows或cols控制尺寸，它们在不同浏览器中渲染差异大，且无法禁用拉伸 - 若需自动伸缩，得用 JS 监听
input事件 +scrollHeight计算，但注意性能和光标位置重置问题
真正麻烦的不是哪一行 CSS 语法，而是你得确认它作用到了哪个 DOM 节点、有没有被更高优先级规则吞掉、以及移动端是否还有隐藏路径可绕过限制——这些细节比属性本身更决定成败。
