Internet Explorer 11 で Flexbox が動作しないのはなぜですか?それを修正するにはどうすればよいですか?

IE でフレックスボックスが機能しない: 原因と回避策

これまでに遭遇したように、Flexbox は Internet Explorer 11 で誤動作する可能性があります。これは次の原因によるものです。 flex プロパティの解析の問題が原因です。幸いなことに、これを解決するにはいくつかの回避策があります。

1.手書きプロパティを利用する:

短縮表現 (例: "flex: 0 0 35%") を使用する代わりに、それを手書きプロパティに分割します:

flex-grow: 0;
flex-shrink: 0;
flex-basis: 35%;

2.フレックスシュリンクを有効にする:

「flex: 0 0 35%」を次のように置き換えて、フレックスシュリンクが有効になっていることを確認します:

flex: 0 1 35%;

3.パーセント値と単位のない値の処理:

特に IE11 のバージョンが不明な場合は、フレックス ベースでバリエーションを使用します:

flex: 1 1 0;
flex: 1 1 0px;
flex: 1 1 0%;

4. flex: auto:

「flex: 1」の代わりに、「flex: auto」(「flex: 1 1 auto」と同等) を使用することを検討してください。これにより、行から列へのフレックス方向を切り替えるときに項目が崩れるのを防ぎます。

5.幅/高さのプロパティを使用します:

フォールバックとして、従来の幅/高さのプロパティに戻すことを検討してください。

6.ブロック レイアウトを選択する:

特定の例では、ブロック レイアウト (つまり、「display: block」) がフレックス レイアウトの実行可能な代替手段になる可能性があります。

追加のヒント:

• 0px を次のように変換する可能性のあるミニファイアーに注意してください0 (0% に影響しない問題)。

• 詳細については、次のリソースを参照してください:

  • フレックスボックスでの画像の動作: https://stackoverflow .com/q/23051125
  • IE の短縮表記プロパティと表記プロパティ: https://stackoverflow.com/q/24549977

以上がInternet Explorer 11 で Flexbox が動作しないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。