Internet Explorer 11 を含むブラウザ間で Flexbox を一貫して動作させるにはどうすればよいですか?

Flexbox と Internet Explorer 11: Display:flex in ?

「浮遊」レイアウトを残すことを追求し、 CSS フレックスボックスを採用すると、Internet Explorer 11 で互換性の問題が発生する可能性があります。主要なブラウザは一般にフレックスボックスをサポートしていますが、 IE11 には特定の課題があります。

「スティッキー フッター」の難問

「Flexbox で解決」の「スティッキー フッター」の例は、IE11 で問題に遭遇しました。 display:flex を に追加することで、 の要素と width:100% を変更しましたが、問題は解決されました。この回避策の背後にある理論的根拠を理解することが重要です。

IE10 と IE11 の flex のデフォルト値はドラフト仕様とは異なっており、その結果、flex:1 のような CSS 宣言に遭遇した場合に一貫性のない動作が発生します。これを 1 0 0 に変更すると、ブラウザ間での互換性が確保されます。

「メディア オブジェクト」の謎に取り組む

「メディア オブジェクト」の例は、IE11 では追加のハードルに直面します。 CSS を操作するさまざまな試みは成功しませんでした。残念ながら、IE11 で機能を実現するための明確な解決策は依然として見つかりません。

互換性に関する考慮事項

「Sticky Footer」の例に対する前述の回避策により、Firefox のレンダリングが誤って中断される可能性があります。これに対処するには、以下に示すように、特に Mozilla をターゲットにしたハッキン​​グを採用します。

@-moz-document url-prefix() {
  #flexible-content {
    flex: 1;
  }
}

ブラウザ ベンダーは、W3C での候補ステータスにより、フレックスボックスの解釈が異なる場合があります。ただし、標準が成熟するにつれて、これは安定するはずです。代替ソリューションがあれば、大変感謝いたします。

以上がInternet Explorer 11 を含むブラウザ間で Flexbox を一貫して動作させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。