IE9 用 Flexbox の代替

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

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

div#navContainer {
    display: flex; // Modern browsers
    display: -ms-flexbox; // IE10
}

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

.container {
    display: flex;
}

.no-flexbox .container {
    display: table-cell;
}

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

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

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

• CSS3 レイアウト:

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

覚えておいてください:

• IE10 のブラウザ サポートは信頼できます。
• オートプレフィクサーはブラウザのプレフィックスを処理します。
• Modernizr はフォールバックを提供します。
• Flexbox は採用されていません エクスクルーシブ。