textarea设resize:none有时不生效，因浏览器用户代理样式默认为both且可能被继承覆盖；iOS Safari直接忽略该属性；需!important强制、JS拦截或改用max-height+overflow控制。
textarea 里设 resize: none 为啥有时不生效
常见现象是加了 resize: none，但 Chrome 或 Safari 里拖拽右下角依然能缩放。根本原因是用户代理样式（user agent stylesheet）对 textarea 的默认 resize 值是 both，而某些浏览器会把该属性继承自父容器或重置为初始值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须显式写在
textarea元素自身上，不能只写在父级或 class 里靠继承 - 加上
!important是最稳妥的（虽然不优雅，但有效）：textarea { resize: none !important; } - 如果用了 CSS-in-JS 或 scoped style（如 Vue 的
<style scoped></style>），确认选择器权重足够覆盖默认样式
移动端 Safari 中 resize 完全被忽略的真相
iOS Safari（尤其 iOS 16+）对 textarea 的 resize 属性基本无视，无论设 none 还是 vertical，都可能保持可拖拽。这不是 bug，是 Apple 主动限制——他们认为用户需要控制输入区域大小，尤其在小屏上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别指望纯 CSS 在 iOS 上禁用缩放；
resize在这里属于“尽力而为”属性 - 若需强约束，得配合 JS 拦截：
textarea.addEventListener('mousedown', e => e.target.matches('textarea') && e.preventDefault())（注意仅拦截右下角拖拽点较难，此法粗暴但有效） - 更合理的方式是放弃禁用，转而用
min-height/max-height+overflow: auto控制视觉行为
resize: vertical 和 resize: horizontal 的实际表现差异
这两个值看似明确，但真实行为受盒模型和父容器影响极大。比如设了 resize: vertical，但父容器宽度固定、textarea 宽度设为 100%，水平方向就根本拖不动——不是属性失效，而是没空间。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
resize: vertical只允许上下拉伸，但前提是元素高度未被max-height或flex等硬性约束锁死 -
resize: horizontal在display: block下通常有效，但在display: inline-block或 flex 子项中常被忽略 - 所有
resize值都要求元素overflow不为visible（至少是auto或scroll），否则拖拽手柄压根不显示
用 resize 做响应式适配时最容易漏掉的兼容点
很多人以为设个 resize: both 就能让用户自由调整，结果在 Firefox 中发现拖拽手柄位置偏移、在旧版 Edge 中完全不显示。这是因为各浏览器对手柄渲染逻辑不同：Firefox 放右下角，Safari 放右下角带阴影，Chrome 有时会叠加在滚动条上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远搭配
resize: both使用padding-right和padding-bottom，给手柄留出安全间距（至少 12px） - 避免与
scrollbar-width（Firefox）或::-webkit-scrollbar冲突；手柄和滚动条重叠时，前者优先级低，容易点不到 - 若项目需支持 IE，直接放弃：
resize在 IE 中完全不支持，且无 polyfill
真正麻烦的从来不是写那行 resize: none，而是你改完之后，得挨个在 Chrome、Safari（iOS/macOS）、Firefox 里点着右下角试三遍——因为每个引擎对手柄的渲染、事件捕获、尺寸计算，都悄悄不一样。
