时间戳

首页 > 解决方案 > 当用户单击它时，IE11 上的按钮切换高度变化

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

问题描述

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

<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>

如果我查看 CSSmat-button-toggle-focus-overlay并mat-button-toggle-ripple mat-ripple获得 52px 而不是 48px 的高度。这也增加了父元素的大小。

我可以禁用 的font-family属性，.mat-button-toggle然后再次启用它，元素会恢复到原来的大小（48px）。

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

标签： cssangularinternet-explorerangular-materialinternet-explorer-11

解决方案

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

把它放进你的styles.css：

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

推荐阅读