rows 和 cols 渲染不一致因非像素单位，依赖浏览器对等宽字体的估算及 font-family、line-height 等差异；仅用 CSS 控制尺寸会破坏语义、JS 逻辑和无障碍支持；应 HTML 设合理初始值、CSS 主控响应式尺寸、JS 谨慎动态适配。
rows 和 cols 在不同浏览器里为什么渲染不一致
因为 rows 和 cols 不是像素单位，而是浏览器按默认等宽字体（如 Courier）估算的“约几行”“约几字符宽”。Firefox 会把 cols="50" 换算成固定像素，Chrome 和 Safari 则更依赖当前 font-family 和 line-height；旧版 Edge 甚至在没设 cols 时把宽度收缩到内容最小宽度。这种差异在移动端尤其明显：iOS Safari 对 cols 的换算比 Android Chrome 宽出 15% 左右，导致同一份 HTML 在两个设备上横向滚动条出现与否都不一样。
只用 CSS 控制 width/height 但删掉 rows/cols 会出什么问题
看似干净，实则埋雷：
-
element.rows读出来是0或undefined，后续 JS 动态调整逻辑（比如根据内容撑开高度）直接失效 - 屏幕阅读器无法获取初始可见行数语义，AT 工具可能读作“文本框，无尺寸信息”
- 服务端控件（如 ASP.NET 的
HtmlTextArea.Rows）若被前端 JS 读取，值为空会导致条件判断错乱 - 某些老系统表单校验逻辑依赖
rows值做“是否展开”的视觉标记，删掉后 UI 状态脱节
怎么配才真正兼顾语义、兼容和响应式
核心是「HTML 提供 fallback，CSS 主控尺寸，JS 补动态行为」：
- HTML 中写合理起点：
<textarea rows="4" cols="30"></textarea>——rows="4"满足无障碍语义，cols="30"避免 IE11 错乱，也不至于太宽 - CSS 必须加这组声明：
width: 100%; min-height: 80px; max-height: 200px; resize: vertical; box-sizing: border-box; - 别写
height: 100px这种固定高，它会覆盖rows计算且无法撑开；也别写style="height: auto"，现代浏览器不认这个值 - 移动端需额外加媒体查询：
@media (max-width: 480px) { textarea { min-height: 60px; } }，否则小屏下min-height: 80px可能挤压键盘弹出空间
JS 动态改 rows 的坑比你想象中多
直接赋值 textarea.rows = 6 看似简单，但：
立即学习“前端免费学习笔记（深入）”；
- 触发强制重排（reflow），频繁调用会卡顿，尤其在 input 事件里实时响应时
- 如果之前有
style.height内联样式，这个赋值会被无视，且rows语义丢失 - React/Vue 中绑定
:rows属性，每次 re-render 都重设，滚动位置清零，用户输入体验断裂 - 用
scrollHeight实现自适应时，忘了先清除style.height，第一次 resize 后高度就被锁死，再也撑不开
真正难的不是让高度变高，而是不让它突然跳、不卡住滚动、不破坏语义——这些细节一漏，跨平台表现就立刻分层。
