textarea 默认 box-sizing 为 content-box，需显式设为 border-box；字体须同时声明 font-family、font-size、line-height；禁用 resize；ie 中用 padding 模拟行高。
textarea 默认 box-sizing 是 content-box，不统一就对不齐
几乎所有浏览器里 textarea 的默认 box-sizing 都是 content-box，而你项目里其他输入控件（比如 input[type="text"]）很可能已设为 border-box。这就导致：明明写了 width: 200px，但 textarea 真实占位宽度 = 200px + 左右 padding + 左右 border，和其他控件视觉错位。
解决方式很简单，但必须显式覆盖：
- 全局重置：在 CSS 重置块里加上
textarea { box-sizing: border-box; } - 避免只写
* { box-sizing: border-box; }—— 某些老版本 Safari 对textarea应用该通配符时有渲染异常 - 如果用了 CSS-in-JS 或 scoped style，确保选择器权重足够，比如加
!important不推荐，但用textarea:not([readonly])这类更具体的选择器更稳妥
textarea 字体继承不可靠，必须显式声明 font-family 和 font-size
textarea 在不同浏览器中字体回退行为差异大：Chrome 可能继承 body 的 font-family，Firefox 却可能用系统等宽默认字体（如 monospace），Safari 在缩放后还容易丢掉 line-height 继承。结果就是文字挤在一起、行高塌陷、中英文不对齐。
关键不是“设了就行”，而是设对组合：
- 必须同时声明
font-family、font-size、line-height，三者缺一不可 - 推荐用无衬线字体栈：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; - 避免用
em或rem做font-size——textarea对相对单位解析不稳定，用px或pt更可控 - 如果项目用了自定义字体，记得在
@font-face加载完成后再应用样式，否则首屏会闪动回退到系统字体
resize 属性干扰盒模型，关掉它才能真正控制尺寸
默认 textarea 右下角有拖拽手柄（resize: both），这看似只是交互功能，但它会隐式影响渲染盒的最小尺寸计算 —— 尤其当设置了 min-width 或 max-width 时，浏览器可能优先保障 resize 区域可用空间，导致内容区被压缩。
统一尺寸前先收口这个变量：
- 禁用拖拽：
resize: none;是最干净的做法 - 如果必须保留调整能力，只允许垂直拉伸：
resize: vertical;，并配合min-height和max-height控制范围 - 注意：iOS Safari 中
resize对textarea支持不完整，设了也可能无效，所以别依赖它做布局校准
IE 和旧 Edge 下 textarea 行高 bug 必须用 padding 模拟
IE11 和 Edge ≤18 存在一个经典 bug：给 textarea 设 line-height 后，光标位置、文字垂直居中、滚动偏移全乱，尤其当 font-size 小于 14px 时更明显。这不是样式没生效，而是渲染引擎把行高当成了“行间距”而非“行高”。
绕过方案不是调 line-height，而是用 padding 挤出视觉行高：
- 设
line-height: normal;彻底关闭干扰项 - 用
padding-top和padding-bottom手动凑出所需行距，例如font-size: 14px时，padding: 8px 6px;能模拟出约 32px 行高 - 配合
height或min-height固定整体高度，避免因内容行数变化导致容器跳动
这件事没法一劳永逸 —— 字体、字号、DPI、缩放比例都会影响 padding 的实际效果，真要兼容到 IE，就得在真实设备上测三遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
