删掉 size 属性是最稳妥的解法，因其单位非像素、不承诺一致性，且现代浏览器仅将其作为不可控 fallback；应改用 CSS width + box-sizing: border-box 统一控制，并优先使用 class 管理。
直接删掉 size 属性是最稳妥的解法
各端渲染差异不是 bug，而是浏览器对「字符宽度估算」的底层实现不同：Chrome 按等宽字符粗算，Firefox 读实际字体度量，Safari 在 Retina 屏下还做 subpixel 插值。同一 size="20" 在 Chrome 可能是 186px，Firefox 是 192px，Safari 是 189.3px——这还没算 UA 默认 padding 和 border 的干扰。
你没法靠调整 size 值去“对齐”这些像素差，因为它的单位根本不是像素，也不承诺一致性。现代项目里，size 已退化为 fallback 行为：仅当 CSS width 未声明且计算值为 auto 时才被读取，而这个 fallback 不可控、不可测、不响应式。
所以第一反应不是“怎么调”，而是“为什么还要留”。真实项目中，删掉 size 后用 CSS 控制，反而更干净、可维护、可测试。
width + box-sizing: border-box 是唯一可靠路径
想让输入框在 Chrome/Firefox/Safari/iOS Safari/Android WebView 上宽度一致，必须用 CSS width，并强制重置盒模型：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 不写
width: 200px单独生效——浏览器 UA 样式默认带padding: 2px 5px，不加box-sizing会导致内容区实际窄于 200px - 推荐最小可行样式：
.form-input { width: 100%; max-width: 400px; box-sizing: border-box; } - 对
type="date"等系统控件，Chrome 默认锁死约 130px 宽，需额外加min-width: 0才能响应width - 避免内联
style="width: 100%"，优先走 class，方便统一管理、主题切换和媒体查询
用 ch 单位模拟“字符宽度语义”但保持可控
如果业务上真需要“看起来像能塞下 N 个字符”的视觉暗示（比如验证码框、搜索框），又不想回到 size 的不可控状态，可用 CSS ch 单位：
-
ch表示 “0” 字符的宽度，比size更贴近字体上下文，且是标准 CSS 单位，全平台支持良好 -
<input type="text" style="width: 30ch; box-sizing: border-box;">比size="30"渲染稳定得多 - 注意：中文环境里
ch仍基于西文字形，若需精确适配汉字，建议用em或固定像素 + 媒体查询微调 - 不要混用：
size="30" style="width: 30ch"是冗余操作，CSS 会覆盖size，但 DOM 中仍残留无意义属性
移动端特别注意：别信 size 对 type="email" 或 type="tel" 的效果
在 iOS Safari 中，type="email" 和 type="tel" 输入框常被键盘逻辑强制拉伸，size 完全失效。你设 size="10"，它可能撑满整个屏幕宽度；设 size="50"，它照样缩成窄条。
此时只有 CSS 能真正干预：
- 加
max-width限制上限，防止溢出 - 对 flex 容器里的 input，务必设
min-width: 0，否则它会因 flex 最小尺寸锁定而拒绝收缩 - 真机测试不能跳过：模拟器看不出 Safari 对
type="date"的宽度锁死行为
真正难搞的从来不是怎么写代码，而是意识到 size 这个属性在 2026 年已基本失去工程价值——它残留的意义，仅限于邮件模板或 CLI 报告这类 CSS 被禁用的极端场景。其他时候，删掉它，CSS 上。
