IE9 以降に Flexbox を実装するにはどうすればよいですか?

IE9 用の Flexbox の代替

最新のブラウザでは、要素を分散して位置合わせする効率的な方法を提供する Flexbox CSS モデルが提供されています。ただし、IE9 には Flexbox のサポートがありません。

IE10 の次の実装を検討してください。

<code class="css">div#navContainer {
    display: flex; // Modern browsers
    display: -ms-flexbox; // IE10
}</code>

IE9 に Flexbox がないことに対処するには、Flexbox 機能を検出する JavaScript ライブラリである Modernizr を組み込むことを検討してください。 Modernizr を使用すると、必要に応じてフォールバック スタイルを追加できます。例:

<code class="css">.container {
    display: flex;
}

.no-flexbox .container {
    display: table-cell;
}</code>

詳しいガイダンスについては、Zoe Gillenwater のプレゼンテーションを参照してください:

• Flexbox によるレベルアップ:

  • 水平方向のナビゲーション間隔:display:inline-block;
  • フレックスボックスを使用しない要素の固定:display:table-cell;
  • フォームフォールバックの整列
  • フレックスオーダーを使用した場合と使用しない場合の例

• CSS3 レイアウト:

  • Flexbox でのインライン ブロックの使用: 水平フォーム
  • Flexbox でのインライン ブロックの使用: 水平ナビゲーション

覚えておいてください:

• IE10 のブラウザ サポートは信頼できます。
• オートプレフィクサーはブラウザのプレフィックスを処理します。
• Modernizr はフォールバックを提供します。
• フレックスボックスの採用は排他的ではありません。

以上がIE9 以降に Flexbox を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。