根本原因是各浏览器UA样式表对input的默认padding值不同，且box-sizing、appearance、placeholder等属性未统一导致渲染差异。
为什么input的padding在Chrome和Firefox里看起来不一样
根本原因是各浏览器 UA 样式表对 input 的默认 padding 值不同：Chrome 给 input[type="text"] 设的是 padding: 1px 2px，Firefox 可能是 padding: 2px 4px，而 Safari 对 input[type="search"] 还额外加了右侧清除图标区域的内边距。这不是 bug，但直接写 padding: 8px 12px 后，在某些浏览器里实际内容区域仍偏移——因为旧值没被真正覆盖。
必须加 box-sizing: border-box，否则padding会撑大宽度
IE9以下默认用 content-box 模型，设 width: 200px; padding: 10px 就真变成 220px；Chrome/Firefox 默认已是 border-box，但不显式声明就依赖 UA 行为，不可靠。
- 全局加一句
* { box-sizing: border-box }最省事，但会影响所有元素（包括table等语义化组件） - 更稳妥的做法是只针对表单控件：
input, select, textarea, button { box-sizing: border-box; } - 如果项目已用 Bootstrap 或其他 UI 库，先确认它是否已重置过
box-sizing，重复设置可能导致 padding 叠加
统一 padding 时要连带重置 margin 和 line-height
input 的对齐问题常不是 padding 单独导致的——它和 margin、line-height、vertical-align 共同作用。比如 flex 容器里 input 和 label 底部错位，八成是因为 margin 没清零或 line-height 拉高了容器高度。
- 显式写
input { margin: 0; padding: 8px 12px; }，别指望继承或默认值 -
line-height: 1.2比line-height: 20px更安全，避免 Safari 渲染波动 - 若需垂直居中文字，优先用
padding-top/padding-bottom微调，而不是靠line-height“撑高”后居中 - 在 flex 布局中，给
input加align-self: center，比依赖父级align-items更可控
特殊 type 的 input 要单独处理 appearance 和 placeholder
input[type="number"] 在 Chrome 右侧有微调按钮，input[type="search"] 在 Safari 有圆角+清除图标——这些原生控件会侵占 padding 区域，导致左右不对称。
立即学习“前端免费学习笔记（深入）”；
- 一律加三端前缀：
-webkit-appearance: none; -moz-appearance: none; appearance: none; -
::placeholder颜色不一致？必须写全：input::placeholder、input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder -
opacity: 1是关键，Firefox 默认opacity: 0.53，不设就会变淡 - 不要用
height + line-height强制 placeholder 居中，改用padding-top: 6px这类显式值
实际项目里最易被忽略的点是：padding 差异从来不是孤立问题。它和 box-sizing、appearance、placeholder、vertical-align 甚至字体渲染深度耦合。调一个 padding-left，可能得同步检查 appearance 是否生效、box-sizing 是否覆盖到位、placeholder 是否被 opacity 拉低——缺一不可。
