根本原因是button默认用Quirks模式计算高度（height含border），而input[type="text"]走标准模式（border在height外），叠加各浏览器对line-height、font-size的fallback差异；须统一box-sizing: border-box，显式设font-size/line-height，清除margin/vertical-align，禁用appearance，并用padding+line-height+min-height替代height。
为什么 button 在 Chrome/Firefox/Safari 里高度总对不上
根本不是“浏览器 bug”，而是 button 默认用 Quirks 模式算高：它的 height 包含 border，而 input[type="text"] 默认走标准模式，border 算在 height 外。结果同设 height: 40px，button 实际内容区只有 38px，input 却是 40px 内容 + 2px 边框 = 42px 总高。再加上各浏览器对 line-height、font-size 的默认 fallback 不同（比如 Safari 偏爱系统字体，行高略大），视觉差就放大了。
box-sizing: border-box 是底线，但光它不够
只加 box-sizing: border-box 能让尺寸计算逻辑一致，但解决不了基线错位和行高浮动问题。必须配合以下操作：
- 所有表单控件（
input、button、select、textarea）统一声明box-sizing: border-box，推荐全局重置：* { box-sizing: border-box; } - 显式设置
font-size和line-height，例如font-size: 14px; line-height: 1.5;，避免继承父级或触发系统字体 fallback - 清除默认
margin和vertical-align：margin: 0; vertical-align: middle;，否则 inline-level 元素会按基线对齐，button 总比 input 高一截 - 禁用
appearance（尤其select）：-webkit-appearance: none; -moz-appearance: none; appearance: none;，防止系统 UI 覆盖样式
line-height 才是控高的关键，别碰 height
硬写 height: 40px 是陷阱——它会和 padding、line-height 冲突，尤其在缩放或不同 DPI 屏幕下容易溢出或压缩文字。正确做法是：
- 用
padding定义按钮“呼吸空间”，例如padding: 10px 16px; - 用
line-height锁定文字垂直居中位置，值建议设为整数像素（如line-height: 20px），且与font-size差值留出视觉余量 - 完全不设
height，让内容撑开容器；若需最小保障，改用min-height: 40px - 按钮内含 SVG 图标时，加
vertical-align: middle;或把图标包进display: flex容器，否则图标基线会拉高整体
兼容旧版 Safari 和 IE11 的实际补丁
即使写了标准属性，Safari 12 之前对 align-items: stretch 支持不稳定，IE11 需要前缀。稳妥方案是：
- Flex 布局按钮组必须加
display: flex和align-items: center（不是stretch），再配min-height强制齐平 - 手动补全厂商前缀：
-webkit-box-sizing: border-box;、-moz-box-sizing: border-box; - 对 IE11，避免用
gap，改用margin控制按钮间距；flex: 1换成width: 33.333%防止塌陷 - 如果项目仍需支持 IE，
button标签务必用type="button"显式声明，否则某些版本会误判为 submit 触发奇怪高度重算
真正难处理的从来不是“怎么写”，而是按钮混在 inline 流里、嵌套在不同 font-size 的容器中、还带图标和多语言文本——这时候靠单一 CSS 属性根本压不住，得把 box-sizing、line-height、vertical-align、padding 四者当一个组合拳来打。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
