2017-11-19 3 views
0

私はChrome、FireFox、MS Edgeで動作する次のhtml divコードを持っていますが、IE10では出力が重ねて表示されます。基本的に3つのflexbox列divが昇順になります。角度4 FlexBox IE10

実用的なブラウザでは、レイアウトは順番に、私が欲しいものです。 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> 

答えて

0

柔軟性を利用できます。これはflexboxが古いブラウザでも動作するためのpolyfillです: https://www.npmjs.com/package/flexibility

+0

これは角度4で動作しますか?ありがとう。 – AlbertK

+0

はい、そうです。 –

+0

私は専門家ではないが、私が今使っているflexbox(https://github.com/angular/flex-layout)と衝突すると思う。 – AlbertK