当用户单击时，按钮切换IE11的高度变化

Question

我在Internet Explorer 11中遇到一个奇怪的问题。在这里，我在垂直方向上使用了一个按钮切换组，如果用户单击该组中的一个按钮，则高度（单击按钮的高度）会有所变化。 。示例代码基于this source：

<mat-button-toggle-group name="fontStyle" aria-label="Font Style" vertical>
    <mat-button-toggle value="bold">Bold</mat-button-toggle>
    <mat-button-toggle value="italic">Italic</mat-button-toggle>
    <mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>

一个按钮呈现为：

<mat-button-toggle tabindex="-1" class="mat-button-toggle mat-button-toggle-appearance-standard mat-button-toggle-checked" id="mat-button-toggle-1" ng-reflect-value="bold" value="bold" _ngcontent-yuh-c0="">
    <button name="fontStyle" tabindex="0" class="mat-button-toggle-button" id="mat-button-toggle-1-button" aria-pressed="true" type="button">
        <div class="mat-button-toggle-label-content">Bold</div>
    </button>
    <div class="mat-button-toggle-focus-overlay"/>
    <div class="mat-button-toggle-ripple mat-ripple" matRipple="" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"/>
</mat-button-toggle>

如果我查看CSS mat-button-toggle-focus-overlay和mat-button-toggle-ripple mat-ripple，则高度为52px而不是48px。这也增加了父元素的大小。

我可以禁用font-family的.mat-button-toggle属性，并再次启用它，元素将恢复为原始大小（48px）。

可能是单击按钮的高度发生变化的原因，我有什么可以做的吗？这仅在IE上发生。

Answer 1

在我看来，这是由单击按钮的标签之间的空格引起的问题。尝试删除标签之间的所有空格，看看是否可以删除多余的4px。如果这是问题，则可以使用display:block

解决