size属性不控制像素宽度，仅按字符数估算可见宽度，因浏览器对字符宽度计算逻辑不同（Chrome用等宽字符、Firefox按实际字体度量、Safari做subpixel插值），导致跨浏览器渲染不一致，且被CSS width覆盖，现代开发应统一用CSS控制。
size 属性在现代浏览器中已基本失效，它不控制像素宽度，也不具备跨浏览器一致性——别指望靠它统一输入框宽度。
为什么 size 在不同浏览器里渲染结果不一样
根本原因不是 bug，而是浏览器对「字符宽度估算」的实现逻辑不同：Chrome 用等宽字符（如 "w"）粗略换算，Firefox 更倾向按当前字体实际度量，Safari 在 Retina 屏下还会做 subpixel 插值。即使你设 size="20"，同一段 HTML 在 Chrome 可能渲染成 186px，Firefox 是 192px，Safari 可能是 189.3px——这还没算上各 UA 样式表给 input 默认加的 padding 和 border 差异。
- IE11 及更早版本会把
size当硬约束，强行撑开父容器导致水平溢出 - Chrome/Firefox/Safari 对
type="date"、type="number"完全忽略size，因为这些控件走的是系统级 UI 渲染路径 - 中文环境下，
size="10"可能只显示 5–7 个汉字（因中文字形比 ASCII 宽），而 emoji 更糟——一个 ?? 就占两个字符位
size 和 width 同时存在时谁赢
现代浏览器（Chrome 120+、Firefox 115+、Safari 17+）一律以 CSS width 为准，size 退化为 fallback 行为——仅当 width 未声明且计算值为 auto 时才被读取。但这个“fallback”不可靠：
- DevTools 的
Computed面板里如果看到width: auto，说明size正在起作用，但你无法预测它最终是多少像素 - 若父容器是
display: flex且没设min-width: 0，size可能触发 flex 项最小宽度锁定，反而让 input 卡死不缩放 - 写
<input size="30" style="width: 100%">是冗余操作，删掉size更干净
真正可控的输入框宽度方案
放弃 size，用 CSS 控制才是唯一可维护路径。关键不是“怎么写”，而是绕过三个隐性陷阱：
- 必须加
box-sizing: border-box，否则padding和border会让实际内容区变窄——尤其在表单控件上，UA 样式默认带padding: 2px 5px -
width: 100%要求父容器有明确宽度；若父元素是inline或未设宽的 flex 容器，它会坍缩成内容宽度 - 对
type="date"这类控件，Chrome 默认锁死约 130px 宽度，需额外加min-width: 0才能响应width
推荐最小可行样式：
input { width: 100%; box-sizing: border-box; min-width: 0; }再配合父容器约束（比如 max-width: 400px），比任何 size 值都稳定。
最易被忽略的一点：很多人以为删掉 size 就万事大吉，但忘了重置表单控件的 UA padding 和 font-size——它们和 size 一样，在不同浏览器里差异巨大，才是宽度不一致的真正推手。
