根本原因是浏览器对input[type="number"]箭头渲染不一致、按钮默认边距差异及inline元素基线对齐逻辑不同；需用Flexbox+显式box-sizing+清除箭头+统一按钮样式+font-size同步来解决。
为什么 input[type="number"] 和加减按钮总差 1–2px？
根本不是 height 写错了，而是三件事在同时捣乱：
-
input[type="number"]默认带上下箭头（appearance: auto），不同浏览器渲染高度不一致，Chrome 会多占几像素，Safari 可能压扁箭头区域 - 按钮（
）默认有border和padding，且各浏览器默认值不同（Firefox 按钮 padding 更大） - 它们默认都是
inline元素，但基线（baseline）计算逻辑完全不同：input对齐文本下划线位置，button对齐文字字体基线，哪怕设了vertical-align: middle，也会因字体度量差异偏移
用 Flexbox 对齐最稳，但必须重置默认样式
别只加 display: flex 就完事，漏掉下面任意一项都可能白忙：
- 父容器必须设
display: flex; align-items: center; -
input[type="number"]要显式写box-sizing: border-box;，否则 Chrome 下height: 36px+border: 1px实际占高 38px - 所有按钮统一清边：
button { border: 0; padding: 0; background: transparent; } - 输入框禁用原生箭头干扰：
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } - 如果按钮含图标字体（如
+、−），务必设font-size与input一致，否则图标撑高按钮盒模型
移动端点击区域小、双击缩放怎么办？
加减按钮在手机上点不准，常见原因有两个：
- 按钮没设最小尺寸：
min-width: 44px; min-height: 44px;（iOS 触控最小推荐尺寸） - 没关双击缩放：
input[type="number"]在 Safari 移动端双击会触发字体放大，需加user-scalable=no到 viewport meta，或更稳妥地用touch-action: manipulation;给按钮 - 按钮缺少触摸反馈：加
:active { opacity: 0.7; }或用伪类模拟按压态，否则用户不确定是否点中
边界值控制不能只靠 min/max 属性
min 和 max 只拦住上下箭头和键盘输入，拦不住手动粘贴或脚本赋值：
- 必须监听
input和change两个事件，每次修改后立刻校验 - 步进计算要防浮点误差：用
Math.round(value / step) * step，别直接value += step - 按钮点击时，先
parseInt(input.value)再运算，避免字符串拼接（比如"5" + 1 === "51"） - 禁用按钮状态要同步更新：
decreaseBtn.disabled = input.value
对齐本身不难，难的是浏览器默认行为像一层薄雾——你看得见元素，却摸不清它底下到底垫了多少 padding、line-height、x-height 和 user agent stylesheet 的幽灵。真正卡住项目的，往往就是那 1px 偏移背后没被 reset 掉的 baseline 计算逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
