Angular项目中Material组件primary与warn类按钮高度不一致求解

问题根因 #

1. 内部文本结构不一致：Create按钮的文本包裹了<b>加粗标签，Cancel按钮为普通文本，Angular Material按钮默认行高规则会根据文本字体权重差异产生细微高度差，即使手动设置固定高度，若box-sizing为content-box，文本撑开的内容高度差异也会导致整体高度不一致。
2. 阴影样式不统一：你给.primary类配置了box-shadow属性，但.warn类没有配置相同的阴影规则。外阴影虽然默认不占据盒模型空间，但浏览器亚像素渲染差异会产生1-2px的视觉高度差，4px的y轴阴影偏移也会让primary按钮视觉上更高。
3. 属性配置错误：你把Angular Material按钮的颜色参数错写在了原生type属性上，Material按钮正确的颜色控制属性是color，原生type属性仅支持button/submit/reset三个值，你写的type="warn"/type="primary"属于无效属性，会导致不同浏览器的默认表单样式渲染不一致。
4. 额外属性影响：第一个按钮额外添加了border-right自定义属性/指令，若该指令会额外添加边框、内边距样式也会导致高度差。

修复方案 #

• 统一两个按钮的内部文本结构，要么都加加粗标签，要么都不加，保持文本样式完全一致。
• 给.warn:not([disabled])选择器添加和primary完全相同的box-shadow规则，保证样式统一。
• 修正按钮属性：把两个按钮的type="warn"、type="primary"替换为color="warn"、color="primary"，同时如果不需要表单提交行为，显式给两个按钮都加type="button"避免浏览器默认submit样式影响。
• 全局添加统一的按钮盒模型和行高规则，彻底消除文本撑开高度的问题：

.mat-raised-button {
  box-sizing: border-box;
  height: 36px; /* 按需调整为你需要的固定高度
  line-height: 36px !important;
}

内容的提问来源于stack exchange，提问作者mntblnk