真正可控的方式是控制内边距、行高和最小高度组合；btn-lg/btn-sm因padding、font-size及line-height渲染差异导致跨浏览器高度不一致，图标基线问题加剧偏移，应改用min-height+line-height+对称padding精确锁定高度。
直接改 height 会破坏按钮的响应式行为和文字垂直居中，真正可控的方式是控制内边距、行高和最小高度组合。
为什么 btn-lg / btn-sm 高度不一致且难对齐
Bootstrap 的 btn-lg 和 btn-sm 本质是通过不同 padding、font-size 和隐式 line-height 计算出高度，但它们不保证跨浏览器像素级一致——尤其在 Windows + Chrome 或 macOS + Safari 下，line-height 渲染微差会让文字上下偏移，视觉上按钮“看起来不一样高”。
-
btn-lg默认用padding: 0.5rem 1rem+font-size: 1.125rem，理论高度 ≈ 44px，但实际依赖字体渲染 -
btn-sm用padding: 0.25rem 0.5rem+font-size: 0.875rem，理论高度 ≈ 32px，同样受line-height影响 - 如果按钮里插入图标（如
<i class="bi bi-plus"></i>），图标基线和文字基线不统一，进一步拉偏垂直位置
用 min-height + line-height + padding 精确锁定高度
放弃依赖 Bootstrap 默认尺寸类，自己定义固定高度锚点。关键不是“设死 height”，而是让内容在容器内强制垂直居中且不撑开。
- 用
min-height而非height：避免文字换行或图标导致按钮意外增高 - 显式设置
line-height为无单位数值（如1.2），不写line-height: 24px—— 否则字体缩放时会失配 - 上下
padding必须对称，且总和 +line-height × font-size≈ 目标高度 - 加
border-width: 1px统一边框，防止btn-outline和btn-primary因默认边框差异导致高度差
例如统一为 36px 高度：
立即学习“前端免费学习笔记（深入）”；
.btn-fixed-md {
min-height: 36px;
padding: 0.375rem 0.75rem; /* 上下 padding 总和 ≈ 36px - (1.2 × 1rem) */
font-size: 1rem;
line-height: 1.2;
border-width: 1px;
}兼容图标按钮和文字换行的细节处理
带图标的按钮（如 <button><i></i> 新建</button>）容易因图标基线浮动而“抬高”整个按钮，纯文字按钮却居中——这不是 Bug，是 inline 元素默认对齐方式。
- 给图标加
vertical-align: middle，而不是top或baseline - 按钮内部所有子元素（文字、图标、svg）都设
display: inline-flex+align-items: center，彻底绕过 baseline 对齐逻辑 - 若按钮文字可能换行（比如响应式断行），必须保留
min-height，并确保white-space: normal（默认就是） - 避免在按钮里用
flex布局包裹多元素——它会干扰line-height垂直居中，除非你明确控制height和justify-content
和 Bootstrap 原生类共存时的覆盖顺序
如果你同时用 btn btn-primary btn-fixed-md，CSS 优先级必须确保自定义类生效。Bootstrap 的 btn 类里有 height: auto，它会覆盖你写的 min-height，除非你更具体或加 !important（不推荐）。
- 把自定义类写在原生类后面：
class="btn btn-primary btn-fixed-md" - 在 Sass 中，用
@extend .btn继承基础样式，再叠加自己的规则，比纯 CSS 更可靠 - 检查 computed styles，确认
min-height没被height: auto覆盖；如果被覆盖，说明.btn的声明权重更高，需提升选择器 specificity（如加父容器类）
最稳的做法，是彻底不用 btn-lg/btn-sm，只用 btn + 自定义尺寸类——否则你永远在和 Bootstrap 的 padding/font-size 衍生逻辑博弈。
