Internet Explorer 11 で Flexbox の「スティッキー フッター」を正常に実装するにはどうすればよいですか?

Internet Explorer 11 のフレックスボックス: 潜在的な障害の探索

CSS フレックスボックスの領域をナビゲートすることは、特にさまざまな機能を考慮すると、困難な作業になる可能性があります。ブラウザの互換性のレベル。最新のブラウザのほとんどはフレックスボックスをシームレスにサポートしていますが、Internet Explorer 11 には顕著な課題があります。 「Flexbox で解決」の「Sticky Footer」の例を、予期しない動作を引き起こさずに実装しようとすると、1 つの問題が発生します。

解決策を詳しく調べるには、< に対する display:flex の影響を理解することが重要です。 html>

では width:100% となります。要素。 CanIUse によると、IE10 と IE11 は、ドラフト仕様との歴史的な相違により、flex:1 を他のブラウザとは異なる方法で解釈します。デフォルトでは、フレックス項目には 0 1 auto ではなく 0 0 auto が割り当てられます。

この問題に対処するには、CSS で flex パラメータを 1 0 0 に調整します。この変更により、少なくとも部分的に問題が軽減されるはずです。ただし、この変更により、Firefox の機能が意図せず中断される可能性があります。これを軽減するには、Mozilla 専用のターゲティング ハックを使用して、フレックスを意図した値に戻します。

例:

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

フレックスボックスは依然として W3C の推奨候補であり、格差の一因となっていることに注意してください。ブラウザの解釈で。仕様が完成するにつれて、これらの不一致は減少することが期待されます。

以上がInternet Explorer 11 で Flexbox の「スティッキー フッター」を正常に実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。