size属性仅控制可见字符数而非像素宽度，其值为无单位数字，受字体、字号等影响导致渲染不一致；精确控制宽度必须使用css width并配合box-sizing: border-box。
size 属性只控制可见字符数，不等于像素宽度
HTML <input type="text"> 的 size 属性不是 CSS 宽度单位，它表示“在当前字体和字号下，大致能显示多少个等宽字符”。浏览器按默认等宽字体（如 monospace）估算，实际渲染受 font-family、font-size、缩放比例影响，同一 size="10" 在不同页面可能差 20px 以上。
常见错误是以为 size="20" 就等于 200px —— 这会导致响应式布局错位或移动端输入框溢出。
-
size值为纯数字，无单位（不能写size="20px"） - 若未设置
size，浏览器默认值通常为20，但不可依赖 - 与
maxlength无关：前者管“显示”，后者管“输入限制”
想精确控制像素宽度？必须用 CSS width
真正稳定控制输入框物理尺寸的唯一可靠方式是 CSS width。注意：直接写 width: 200px 可能被 padding/border 撑大，需配合 box-sizing: border-box。
<input type="text" style="width: 200px; box-sizing: border-box;">
- 优先用 class 而非内联 style，便于复用和维护
- 避免同时设
size和width：CSS 会覆盖size的视觉效果，但size仍存在于 DOM 中，可能干扰某些旧脚本逻辑 - 响应式场景下，改用
width: 100%或max-width更安全
size 属性还有用吗？仅限简单表单 + 无 CSS 环境
现在几乎不存在“不能用 CSS”的真实场景，但 size 在极少数情况仍有价值：
- 内嵌 HTML 邮件模板（部分客户端禁用或忽略 CSS）
- CLI 工具生成的简易 HTML 报告（追求零样式依赖）
- 需要快速原型且明确接受“字符数估算”精度时，比如后台管理页临时搜索框
除此之外，建议一律移除 size，交给 CSS 管理尺寸。保留它只会增加理解成本和潜在不一致。
Chrome/Firefox/Safari 对 size 的渲染差异
主流浏览器对 size 的实现并不统一：Firefox 偏向按 monospace 计算；Chrome 在 font-family: sans-serif 下会略压缩字符间距；Safari 则更依赖系统字体度量。实测同 size="15" 在三端宽度可能相差 8–12px。
- 若必须用
size，务必在目标浏览器中真机测试 - 不要在
<input type="email">或<input type="url">上依赖size：这些类型在移动 Safari 中常被强制拉伸以适配键盘 - 无障碍方面：
size不影响屏幕阅读器行为，但过小的size（如size="1"）会让视力用户误判可输入长度
size 是个正在被淘汰的属性。真正要控制宽度，就老老实实写 CSS；如果只是想让用户少输点字，该用 maxlength 或前端校验。别让它在代码里悄悄埋雷。
