Angular 4 FlexBox IE10

Question

我有以下 html div 代码，可在 Chrome、FireFox 和 MS Edge 上运行，但在 IE10 上，输出堆叠在一起。基本上三个flexbox列div按升序排列。

在工作浏览器上，它们是一个接一个的布局，这正是我想要的。是解决IE10问题的方法吗？谢谢。

<div class="container">
  <div fxLayout="column" fxLayoutAlign="center center"   style="text-align:center" >
    <div fxFlex="grow" fxFlexAlign="center" *ngIf="QrCode && !QrCompleted">
     {{DisplayCode}}
    </div>
    <div fxFlex fxFlexAlign="center" *ngIf="loginCode && !loginCompleted">
      <p>Display Count: {{cnt}} </p>
      <h1>Get Login Code from SMS to Login</h1>
      <p>  {{errorMessage}} </p>
    </div>
  </div>
  <div fxLayout="column" fxLayoutAlign="center center"  *ngIf="LoginCompleted">
    <div  fxFlex="grow" >
          <button style="height:50px; width:200px" (click)="onClick()">Click for New Code</button>
    </div>
</div>
<div fxLayout="column" fxLayoutAlign="center center"  >
  <div fxFlex="grow" >
    <a href="https://www.example.com/store" target="_blank">
          <img src="../assets/companylogo.svg" alt="Logo" height="100px" width="400px" >
    </a>
  </div>    
</div>
</div>

Answer 1

您可以使用灵活性。它是一个用于 flexbox 的 polyfill，也可以在旧版浏览器上工作： https://www.npmjs.com/package/flexibility