angular - 如何修复 IE 布局问题用户界面设计（flexlayout、scss 和 angular）

Question

我想寻求有关制作 x 浏览器兼容性 UI 的帮助。我目前正在使用 angular flexlayout 和 scss 为某个设计编写一个组件..我想实现这个设计

除 IE 11 外，一切都正确呈现

但在 IE 上呈现不同。这是 IE 上的样子

这是我的模板代码：

<div class="balance-widget__container" matRipple (click)="onBalanceWidgetClicked()">
  <div class="balance-widget__header mat-{{ headerColor }} py-16" fxLayout="column" fxLayoutAlign="center center">{{ headerLabel }}</div>
  <div class="ftr-balance-widget__container-details" fxLayout="column" fxLayoutAlign="center center">
    <mat-progress-spinner class="ftr-balance-widget__container-details-spinner" mode="determinate" value="100" [color]="ringColor" [strokeWidth]="strokeWidth" [diameter]="diameter"></mat-progress-spinner>
    <div class="ftr-balance-widget__container-details-values w-100 h-100" fxLayout="column" fxLayoutAlign="center center">
        <div fxLayout="column" fxLayoutAlign="center center">
          <div>30</div>
          <div>Available</div>
        </div>
        <div class="ftr-balance-widget__container-details-values-divider px-8 py-8" style="width:120px;" fxLayout="row" fxLayoutAlign="center center">
          <div class="ftr-balance-widget__container-details-values-divider-line" fxFlex fxLayout="column" fxLayoutAlign="center center">
          </div>
          <div class="ftr-balance-widget__container-details-values-divider-subheader">{{ subHeaderLabel }}</div>
        </div>
        <div fxLayout="column" fxLayoutAlign="center center">
          <div>Balance</div>
          <div>2333</div>
        </div>
    </div>
  </div>
</div>

这是scss：

.balance-widget__container {
    background-color: $normal-background;
    
    &-details {
        cursor: pointer;
        position: relative;

        &-spinner {
            position: relative;
        }
        
        &-values {
            position: absolute;
            left: 0;
            top:0;
            height:100%;
            width:100%;
            margin: auto;

            &-divider {
                position: relative;

                &-line {
                    position: relative;
                    background-color: $primary5;
                }

                &-subheader {
                    background-color: $normal-background;
                    position: absolute;
                    left:100%;
                }
            }
        }
    }
}

标签： angularinternet-explorersasscross-browserangular-flex-layout