resize: none 是禁用 textarea 拖拽最直接方式，但必须配合 overflow: auto（或 hidden）才生效，因 CSS 规范要求 resize 仅在 overflow 非 visible 时起作用；默认 overflow: visible 会导致该样式被忽略。
resize: none 是禁用 textarea 拖拽调整大小最直接有效的方式，现代浏览器（Chrome 1+、Firefox 4+、Edge 12+、Safari 5.1+）全部支持，无需 polyfill。
为什么加了 resize: none 还能拖？
常见原因是 overflow 没配对。CSS 规范要求：只有当元素的 overflow 不是 visible 时，resize 才会生效（哪怕你设的是 none）。默认 textarea 的 overflow 是 visible，所以样式会被忽略。
- 必须显式设置
overflow: auto或overflow: hidden（推荐auto，保留滚动能力） - 错误写法：
textarea { resize: none; }（无overflow，不生效） - 正确写法：
textarea { resize: none; overflow: auto; } - 如果同时设了
max-height却漏掉overflow，内容溢出会被直接裁剪，用户看不到滚动条
只禁用部分 textarea 的拖拽
用 CSS 选择器精准控制，避免全局污染。注意优先级和作用范围：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 按 class：
.fixed-textarea { resize: none; overflow: auto; }，然后在 HTML 中写<textarea class="fixed-textarea"></textarea> - 按 name 属性：
textarea[name="comment"] { resize: none; overflow: auto; } - 按 id：
#bio-field { resize: none; overflow: auto; } - 慎用内联样式：
<textarea style="resize: none; overflow: auto;"></textarea>，调试时难覆盖，维护成本高
移动端和兼容性要注意什么
绝大多数情况没问题，但有两个真实存在的坑：
立即学习“前端免费学习笔记（深入）”；
- 老版本 Android WebView（尤其 Android 4.x 系统自带浏览器）可能忽略
resize: none，建议真机测试，别只信模拟器 - IE 10 及更早版本完全不支持该属性，不过 2026 年基本可忽略；若真要兜底，只能 JS 拦截：
element.addEventListener('mousedown', e => { if (e.target === element && e.offsetX > element.offsetWidth - 10 && e.offsetY > element.offsetHeight - 10) e.preventDefault(); })，但没必要为 IE 写这种逻辑 -
resize: vertical或resize: horizontal在 Safari 和 Chrome 上表现稳定，但 Firefox 对horizontal支持较弱（有时宽度仍可微调），如需单向控制，优先用vertical+width: 100%锁死水平方向
真正容易被忽略的不是怎么关掉拖拽，而是关掉之后怎么处理内容溢出——resize: none 只去掉右下角小方块，它不帮你管高度适配、滚动条出现时机或移动端 touch 区域响应。这些得靠 overflow、max-height、甚至 JS 监听 input 事件做自动伸缩来补全。
