rows和cols不是尺寸控制工具，而是语义fallback；真要控大小必须用CSS，因它们仅为基于默认等宽字体的初始行/列数估算值，非像素单位，不参与布局计算，且易受字体、字号、容器布局及CSS覆盖影响而失效。
直接说结论：rows 和 cols 不是尺寸控制工具，而是语义 fallback；真要控大小，必须用 CSS。
为什么直接写 rows="5 和 cols="40" 会失效？
它们只是浏览器按默认等宽字体估算的“初始可见行/列数”，不是像素值，也不参与布局计算：
-
rows="5"不等于height: 5em或height: 80px，换字体、改font-size、套进flex容器后高度立刻失准 -
cols="40"在font-family: "Microsoft YaHei"下可能只显示约 30 个中文字符宽度，换成monospace才接近 40 英文字符 - 一旦加了
style="height: 120px"或width: 100%，rows/cols就被完全忽略——CSS 优先级更高 - 在
grid或flex布局中，cols基本不生效，textarea宽度由父容器决定
现代项目该用哪些 CSS 属性替代 rows/cols？
用 CSS 控制尺寸才是稳定、可预测、可响应的做法：
- 宽度统一用
width: 100%或具体值（如width: 500px），避免依赖cols - 高度用
min-height: 80px+max-height: 200px组合，既防塌陷又防无限拉伸 - 务必加
box-sizing: border-box，否则padding会让内容区变窄 - 用
resize: vertical允许用户手动拉高，或resize: none禁用（此时min-height必须足够） - 如果需要自适应高度（随内容增长），监听
input事件并设textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px';，但记得先清空内联height
JS 动态修改 rows 属性时为什么常出问题？
直接赋值 textarea.rows = 8 看似简单，实际埋了不少坑：
立即学习“前端免费学习笔记（深入）”；
- 它只触发一次重排，且仅基于当前字体/行高重新估算初始高度，不响应后续内容变化
- 若之前用 CSS 设了
height，这个赋值会被无视；若同时有style.height，rows彻底失效 - 在 React/Vue 中绑定
rows属性，每次 re-render 都会强制重排，滚动位置丢失、光标跳动 - 表单验证失败后仅改
rows而不调cols，宽高比例突变，UI 显得割裂
兼容 IE11 时 rows/cols 怎么设才不太翻车？
IE11 不支持 min-height 在 textarea 上生效，resize 也无效，这时 rows/cols 是唯一锚点，但不能乱来：
-
rows="3"≈ 初始高度 60–75px（含默认padding和line-height），实测建议从 3 起设 -
cols="50"≈ 视觉宽度 300–400px，避开cols="1000"这类极端值，IE 下易错位或滚动条异常 - 不要混用：
rows="4"+style="height: 100px"在 IE 中可能互相冲突，选其一即可 - 如果必须兼顾新旧，保留合理 fallback 值（如
rows="4" cols="30"），再用 CSS 覆盖，IE 会忽略 CSS 部分而回退到 HTML 属性
真正难的不是写对 rows 或 cols，而是意识到它们从来就不是尺寸控制手段——把它们当语义提示，把尺寸交给 CSS，把交互逻辑交给 JS，三者边界划清，才能少踩一半坑。
