当用户点击它时，按钮切换 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。这也会增加父元素的大小。

我可以禁用 .mat-button-toggle 的 font-family 属性，并在再次启用它时元素恢复到原来的大小 (48px)。

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

Answer 1

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

来解决它

将此放入您的 styles.css:

.mat-button-toggle-button { display: block; }

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

Button-toggles changes in height on IE11, when the user clicks on it

css

internet-explorer

internet-explorer-11

angular-material

angular