角度垫徽章位置在 Chrome 中移动

Question

使用最新版本的 Angular。我正在尝试使用 Angular 材料垫徽章来显示玩家投掷的达阵次数，但只有在镀铬中，当我增加数字时，徽章位置才会发生变化。在 Firefox 中运行时，徽章位置是所需的。

HTML 代码如下：

<p>Touchdowns<span matBadge="{{touchdowns}}" matBadgeOverlap="false"></span></p>
<button (click)="addTouchdown()">Score Touchdown<button>

这是TS代码：

this.touchdowns:number = 0;

addTouchdown(){
    this.touchdowns++;
}

除了来自 Angular 的标准样式之外，没有应用任何样式。

Answer 1

这是一个已知问题。在此处查看 GitHub 问题。根据帮助我修复它的解决方法（如问题评论之一所建议）：

您也可以只添加“display: inline-block;” 到包含徽章的内联元素。