Question

我们在用于滚动页面的组件内部具有“材料浮动”操作按钮。我们对按钮进行样式设置，以使用主题中的原色而不是强调色。所有现代的浏览器都可以正常工作，但是仅在Internet Explorer 11中，按钮会先以强调色呈现一秒钟，然后再更改为原色。在我们必须支持的低功率机器上，这个问题更加明显。

如何防止强调色最初呈现？

HTML

<div class="mat-fab-scroll mat-fab-scroll-up" *ngIf="hasOverflow">
    <button mat-fab class="mat-fab-scroll-up" 
        aria-label="scroll up"
        [disabled]="!canScrollUp"
        color="primary"
        (click)="scroll(true)">
        <i class="fas fa-arrow-up"></i>
    </button>
</div>
<div class="mat-fab-scroll mat-fab-scroll-down" *ngIf="hasOverflow">
    <button mat-fab class="mat-fab-scroll-down" 
        aria-label="scroll down"
        [disabled]="!canScrollDown"
        color="primary"
        (click)="scroll(false)">
        <i class="fas fa-arrow-down"></i>
    </button>
</div>

CSS

.mat-fab-scroll .mat-fab {
    width: 60px;
    height: 60px;
}

.mat-fab-scroll-down .mat-fab {
    position: fixed;
    bottom: 10%;
    right: 30px;
    z-index: 9999;
    opacity: 0.6;
}

.mat-fab-scroll-up .mat-fab {
    position: fixed;
    top: 65%;
    right: 30px;
    z-index: 9999;
    opacity: 0.6;
}

角材料mat-fab无法在IE11中正确渲染

0 个答案: