resize: none是唯一可靠、跨浏览器禁用textarea拉伸的方式，因rows/cols仅控制初始尺寸而不阻止拖拽，仅设width/height亦无法移除右下角手柄；必须配合min/max-height等确保尺寸稳定，且样式须作用于原生textarea元素。
resize: none 是唯一可靠、跨浏览器生效的禁用拉伸方式，其他手段（如仅设 rows/cols、只写 width/height）都不能阻止用户拖拽右下角手柄。
为什么 resize: none 必须用，且不能只靠 HTML 属性
HTML 的 rows 和 cols 仅影响初始渲染行高与字符宽度，不控制可交互行为。Chrome/Firefox/Safari 都默认启用拖拽手柄，哪怕你写了 rows="4" cols="50"，用户照样能拖大拖小——这会破坏布局、撑开容器、甚至遮挡按钮。
-
resize: none直接移除手柄，是 W3C 标准属性，所有现代浏览器（含 Edge 12+、Firefox 4+、Chrome 1+）都支持 -
rows/cols在 IE 和 Firefox 下换行计算不一致，同一数值显示行数可能差 1～2 行 - 只设
width/height而不加resize: none，手柄仍在，用户一拖就失效
resize 的三个取值实际效果差异
别只记 none，不同场景要选对值：
-
resize: none：彻底隐藏手柄，完全禁止任何方向拉伸（最常用） -
resize: vertical：只允许上下拖，禁横向；适合固定宽度、内容长度不确定的表单（如评论框） -
resize: horizontal：只允许左右拖，禁纵向；极少用，通常搭配white-space: nowrap场景
注意：resize: auto 或 resize: unset 等同于默认行为，不是“恢复”，而是“交还控制权”——等于没写。
固定尺寸必须配 min/max，否则移动端或缩放时会破
只写 width: 400px; height: 120px; 不够。在 iOS Safari 或 Windows 缩放 125% 时，height 可能被忽略，导致 textarea 拉高到 3 行以上。
- 必须同时设
min-height和max-height（值相同），min-width/max-width同理 - 推荐用
em或rem替代px，比如height: 6em; min-height: 6em; max-height: 6em;，更适配字体缩放 - 如果用了
box-sizing: border-box（应始终开启），则height包含 padding 和 border，避免意外溢出
Vue/React 中动态设置 resize 容易漏掉的点
在组件内用 JS 动态加样式（比如根据状态切换可编辑性），光改 element.style.resize = 'none' 不保险：
- 内联样式优先级虽高，但若 CSS 文件里有
textarea { resize: both !important }，就会覆盖 - React 中用
style={{ resize: 'none' }}没问题；Vue 模板中直接写:style="{ resize: isFixed ? 'none' : 'vertical' }"更稳妥 - Element UI / Ant Design 的
<el-input type="textarea"></el-input>默认透传resize，但需确认其内部<textarea></textarea>是否被包裹了额外 div，否则样式可能未命中
最稳做法：给 textarea 加 class（如 fixed-textarea），CSS 写死 .fixed-textarea { resize: none; }，JS 只负责增删 class。
resize: none，而是忘记它和 min/max 必须成套出现，以及在框架里没确保样式最终落在原生 <textarea></textarea> 上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
