根本原因是浏览器对button和input的盒模型解析不同：button默认height含border/padding，input仅指内容区高度；需统一box-sizing:border-box、重置::-moz-focus-inner、禁用默认border，并用padding+font-size替代height控制尺寸。
button 和 input 高度不一致的根本原因
不是你写错了 height，而是浏览器对 button 和 input 的盒模型计算方式不同：默认情况下，button 在多数浏览器（尤其是旧版 WebKit/Gecko）中会以 Quirks 模式解析高度——height 值包含 border 和 padding；而 input[type="text"] 则按标准模式，height 仅指内容区高度，border 和 padding 会额外撑高。
这导致即使写了相同的 height: 40px，实际渲染高度也差 2–4px。更麻烦的是，Firefox 还会给 input[type="submit"] 插入 ::-moz-focus-inner 伪元素，默认带 border 和 padding，进一步放大差异。
- 必须统一启用
box-sizing: border-box，且作用于两者：input, button { box-sizing: border-box; } - 重置 Firefox 的 focus 内边距：
input[type="submit"]::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } - 禁用所有默认
border或显式设为一致值，否则边框宽度差异会直接反映在高度上
用 padding + font-size 替代 height 控制按钮尺寸
硬写 height 是陷阱。按钮高度应由文字+内边距自然撑开，而非强制截断或拉伸。一旦设了 height，就容易和 line-height、vertical-align、图标基线冲突，尤其在含 SVG 或多行文本时。
推荐组合：
立即学习“前端免费学习笔记（深入）”；
-
padding: 10px 20px（上下左右对称，避免单边 padding 导致 baseline 偏移） -
font-size: 14px（固定字号，避免不同祖先 font-size 继承干扰） -
line-height: 20px（略大于 font-size，保证单行文字垂直居中，且不依赖默认 line-height 浮动） - 禁用
height，让容器随内容自适应 - 加
box-sizing: border-box确保 padding 不额外扩张
这样写出来的按钮，在 Chrome/Firefox/Safari 中高度一致性远高于设死 height 的方案。
Flex 布局下多按钮等高对齐的实操要点
当按钮并排放在 ion-col、div 或 td 里，且内容长度不一（比如“删除” vs “确认删除并同步至云端”），仅靠 padding 无法拉齐高度——短文本按钮会变矮。
关键不是给按钮设 height，而是让父容器用 Flex 并让子项拉伸：
- 父容器设
display: flex（如ion-col或.button-group） - 按钮加
align-self: stretch（注意：不是flex: 1，那是分配宽度） - 若父容器是
table-cell（如td），需额外加vertical-align: top配合height: 100%，但不如 Flex 可靠 - 避免在按钮内用
white-space: normal以外的换行控制，否则长文本换行后高度突变，破坏 stretch 效果
这个方案在 Ionic、React/Vue 动态列表中非常稳定，比 JS 计算最大高度靠谱得多。
表格中按钮高度错乱的典型修复路径
嵌在 table 或 ion-grid 里的按钮，常因 display: inline-block 默认行为和 vertical-align: baseline 导致错位。此时 height: 100% 往往无效，因为 td 的高度本身就不稳定。
三步到位：
- 给
td或ion-col设vertical-align: top（消除 baseline 对齐带来的浮动偏移） - 按钮设
display: block（干掉 inline-block 的换行间隙和 vertical-align 影响） - 配合
width: 100%; height: 100%，再加box-sizing: border-box - 如果整行按钮仍不齐，检查是否用了
table-layout: auto—— 改成table-layout: fixed并给第一行td设明确width，能极大提升高度可控性
最易被忽略的是：表格单元格默认没有最小高度约束，小屏下文本换行会把按钮顶高，所以必要时得加 min-height 而非 height。
